如何在Django项目中优雅的实现markdown和代码高亮

django如何实现markdown

前言

MardownM语法简洁明了、学习容易、输出内容样式丰富,很受大众喜爱。兔子先生的内容就是通过Markdown的格式来编辑发布的。

如何在Django中使用Markdown

可以直接使用django-markdown-deux这个django的第三方插件,它的核心实现其实还是通过python-markdown2,但是集成使用起来非常方便:

第一步 安装

pip install django-markdown-deux

第二步 配置

markdown_deux 加入到django项目的settings.py配置文件的INSTALLED_APPS中.

第三步 使用

将模板文件添加模板标签,并对需要进行markdown转换的内容,通过markdown标签来转换

{% load markdown_deux_tags %}
...
{{ content|markdown:"STYLE" }}      

代码如何高亮显示

在完成以上步骤后,内容就可以按照Markdown的语法来编写并渲染了。但是我们发现代码还是不能高亮显示,该怎么办呢,别急,我来教你如何优雅的实现。

第一步 安装pygments

pygments是一种通用语法高亮显示工具,用来美化源代码,支持的丰富的语言和格式。

我们只需要通过pip来安装:

pip install pygments

第二步 安装pygments-css样式库

下载样式库

git clone https://github.com/richleland/pygments-css.git

修改makefile,将.highlight替换为codehilite

gen_html = pygmentize -S $(style) -f html -a .codehilite > $(style).css;

2 - 生成样式文件default.css

make cssfiles

将新生成的样式文件default.css,放入到网站的css文件中,并在需要展现的页面模板中增加该css文件

    <link href="/static/css/default.css" rel="stylesheet">

修改项目的settings.py文件,增加fenced-code-blocks

MARKDOWN_DEUX_STYLES = {
    "default": {
        "extras": {
            "code-friendly": None,
            "fenced-code-blocks": None,
        },
        "safe_mode": "escape",
    },
}

大功告成,再看看你的页面吧,可以参考兔子先生的一篇文章爬虫教程-pyquery

语法高亮示例

小结

django下使用markdown非常方便,提高写作效率,并能简洁的展现。

对于代码开发者来说,语法高亮是必须的,本方案无需修改markdown2库的代码即可实现语法的高亮显示。

展开剩余53%