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

最新推荐文章于 2025-06-17 11:58:26 发布

drcbin

最新推荐文章于 2025-06-17 11:58:26 发布

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Django撸博客系文章标签： django markdown 代码高亮

本文链接：https://blog.youkuaiyun.com/DrCBin/article/details/80151763

Django撸博客系专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Django中如何使用Markdown渲染博客页面，并通过showdown库实现，同时详细阐述了如何结合代码高亮插件，确保代码段的样式呈现，最后讨论了如何自定义和选择更多样式的代码高亮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

渲染方式的选择

有两种方式可以渲染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> <!-- 这是原始的md文本-->

在适当的地方,写入如下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();
})

以上就完成了代码的高亮