Django撸博客之使用Markdown渲染页面

渲染方式的选择

有两种方式可以渲染Markdown为html:

• 使用python渲染
• 使用js渲染

找了一些的python渲染,主要是 markdown和markdown2, 但都渲染得不好, 主要是代码部分. 还有一些现成的django-markdown, 也都挺方便使用的. 无奈效果不好. 所以决定使用js渲染.

使用showdown来渲染

我选择的showdown.

先引入showdown:

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.6/showdown.min.js" charset="utf-8"> script>

然后在html页面中:

<p id="post_content">{{ post.content }}p> 

在适当的地方,写入如下js代码:

$(document).ready(() => {
    var src = $('#post_content').text()     
    var converter = new showdown.Converter();
    var html = converter.makeHtml(src);
    $('#post_content').html(html)
})

有几点需要注意:

• 需要在执行以上代码之前引入jquery
• 要在渲染{{ post.content }}之后

使用代码高亮

以上就完成了markdown的解析,但是如果存在代码片段,则代码片段并不会高亮

上面解决markdown解析的问题, 但是代码并没有高亮,需要其他库来解决

到这个页面来自定义并下载生成的js,然后引入.

<script src="path/to/highlight.pack.js">script>

或者使用cnd:

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js">script>

引入css样式:

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-dune-light.min.css">

然后在合适的地方进行初始化:

<script >hljs.initHighlightingOnLoad();script> 

有几点需要注意:

• 要在渲染{{ post.content }}之后
• 需要在执行解析markdown之后

所以我的完整代码是这样的:

$(document).ready(() => {
    var src = $('#post_content').text()     
    var converter = new showdown.Converter();
    var html = converter.makeHtml(src);
    $('#post_content').html(html);
    hljs.initHighlightingOnLoad();
})

以上就完成了代码的高亮

更多样式的选择

上述的代码高亮可能样式你不是太喜欢, 可以在这里预览更多的样式, 并且在这里去找样式对应的文件名. 替换掉

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/.min.css">

中的

完成