美文网首页我爱编程
flask+markdown+highlight.js写文章以及

flask+markdown+highlight.js写文章以及

作者: 清风徐来丶丶 | 来源:发表于2018-04-10 11:23 被阅读74次

背景介绍

最开始的使用想用misaka+pygments去实现了,无奈对最后的效果不满意,无法自动识别以及样式难看,google了下发现了highlight.js这个好东西。

我的博客的文章处理逻辑是后台直接贴上编辑器写好markdown格式的文章,提交后会存到数据库了,查看的时候从数据库读取markdown格式的内容使用markdown模块处理,发送前端展示。

示例代码

flask与markdown

提交数据库的表单如下

class EditPostForm(FlaskForm):
    title = StringField('Title', validators=[Length(1, 64)])
    body = TextAreaField('Markdown')
    body_html = TextAreaField('Html')
    outline = StringField('Outline', validators=[Length(0, 64)])
    created = DateTimeField('Created')
    modified = DateTimeField('Modified')
    submit = SubmitField('Submit')

其中的body_html是保存了一份提交时生成html文件。

文章的views视图代码如下

@main.route('/post/<int:id>', methods=['GET'])
def post(id):
    post = Post.query.get_or_404(id)
    post_html = markdown(post.body, output_format='html5', \
    extensions=['markdown.extensions.toc','markdown.extensions.fenced_code'])
    # post_html = markdown(post.body)
    # print(post.body)
    return render_template('post.html', post_html=post_html,post=post)

markdown模块启用了tocfenced_code两个扩展,后面的扩展能保证代码块以下格式

<pre>
<code>
mount -o loop xxx.iso /mnt/
cp -a /mnt/* /data/sys/
</code>
</pre>

只有这样的标签才能被highlight.js自动识别为代码。

highlight.js配置

highlight.js直接去官网下载一个压缩包,把里面的highlight.pack.js加载到网站上,压缩包中的style里面全都是不同的代码高亮的样式,可以选一个喜欢的配置到网站上,对于具体的显示样式可以访问highlight.js的demo页面查看。

文件下载好了,最后就是需要在网页每次加载的时候去执行highlightjs.js中的方法了。

我的网站配置

<script src="../static/CSS3_two/js/highlight.pack.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='CSS3_two/css/tomorrow-night.css') }}">
<script>
    hljs.initHighlightingOnLoad();
</script>

大功告成了

示例图片

相关文章

  • flask+markdown+highlight.js写文章以及

    背景介绍 最开始的使用想用misaka+pygments去实现了,无奈对最后的效果不满意,无法自动识别以及样式难看...

  • 如何写文章, 以及如何专业地写文章

    如何写文章和如何专业地写文章,狠多人总觉得这是同一件事。实际上并非如此。 我们常常看到一些非常有天赋的人,他们写出...

  • 写文章一定要有很多人看才写?

    写文章以前我并不认为我会去接触和尝试做这个事情,当我接触以及坚持下来天天写文章。也有看到和听到很多人说写文章...

  • 写文章赚钱方法(新手也能做)

    写文章赚钱可行吗?新人可以在哪些平台写作,以及有哪些变现方法?谈谈我对写作变现的看法,今天就来聊聊写文章赚钱这件事...

  • 新家清单

    看到这个题目真是醉了,我这周真是为了写文章而写文章,为啥呢,因为这周的我太负面了,每天处于负能量以及负面情绪中,所...

  • 头条号运营第五弹:头条号如何写文章?找什么素材?哪里找素材?

    许多自媒体新手写文章的时候,总是苦于找不到素材,以及如何去处理素材,对于这样的新手,只需要学会本文中的写文章方法,...

  • Android-Activity 生命周期

    博主目前写文章是对日常开发的总结以及回顾,以及自我驱动。 本文参考- Android 开发艺术探索 分析正常情况下...

  • 玄一山人:乌俄战事发展结果

    所有公众号都是为了写文章而写文章,全靠东西拼凑,以及收集其他公众号文章观点整合成文而发的。其实,全是别人嚼剩下的东...

  • Markdown基础小记

    准备着手开始编写文章梳理、记录以及分享 既然写文章,那么就从排版学习开始! 标题 h1 h2 h3 h4 h5 h...

  • 谢谢学长的指教

    今天晚上紧急通知了我们刚刚加入组织的新成员,关于写文章的事情,给我们说说写文章怎么写,关于新闻稿,以及写人物专访的...

网友评论

    本文标题:flask+markdown+highlight.js写文章以及

    本文链接:https://www.haomeiwen.com/subject/rxvghftx.html