Django搭建博客（九）：为博客添加代码高亮显示和 md文档支持

一、用到的模块

• Markdown
• pygments
• re

安装直接使用 pip 安装最新版本即可

二、支持的 markdown格式

目前只支持 Typora编辑器所支持的 markdown格式。

特别需要注意的是：代码块必须使用三个 '`' 符号包裹起来才能正确识别，语言标记可有可无，但是三个 '`' 必须单独成行。

三、解析思路

先用正则将代码块从文档中提取出来，再用 pygments对代码进行上色，并生成 html标签。

再将生成的 html标签插入到原来代码的位置，然后再用 markdown将处理之后的文档整个解析为 html文档即可。

四、遇到的问题

1、如何将上色后的代码放回原位

一开始我想直接使用占位符替换原来的代码，然后再根据占位符来将代码插入回原来的位置。

但是在仔细看过 re库的使用后，我发现 re.sub() 方法是可以接受一个函数来返回需要替换的字符串。

所以我们可以直接在函数里将代码转化成 html标签并返回，这样就可以将转化后的 html标签放到对应位置了。

2、如何显示行号

pygments是可以自动生成带行号的 html标签的（只需要将 lineno设置为 True 即可）。

但是我发现 pygments生成的 html标签其实是一个 1行 2列的表格，一列用来显示行号，一列用来显示代码。

然而这样却有一个问题，就是当一行代码太长时会自动换行，而且行号有时候不能和对应的行对齐。

解决办法是：自定义一个 formatter来生成自定义的代码块，这里我用了两个 ol标签，一个用来包裹行号，另一个用来包裹代码标签。

五、使用方法

我将代码封装成了一个函数，这个函数接受一个 markdown文档的字符串，返回 html字符串。

返回的字符串可以直接插入 html页面中（Django中记得使用 safe过滤器）。

使用方法如下：

#此处引入封装好的函数，假设在同级目录下
from .markdown_to_html import md_to_html

md_str = '这是一段 md字符串'

html_str = md_to_html(md_str)

代码请看 ：markdown_to_html.py

生成 html代码所需的样式文件：style.css

项目地址：myblog

在线 demo：Test Markdown