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

背景介绍

最开始的使用想用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模块启用了toc和fenced_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>

大功告成了

示例图片