9 - 支持 Markdown 语法和代码高亮

为了让博客文章具备良好的排版，显示更加丰富的格式，咱们使用 Markdown 语法来书写咱们的博文。Markdown 是一种 HTML 文本标记语言，只要遵循它约定的语法格式，Markdown 的渲染器就可以把咱们写的文章转换为标准的 HTML 文档，从而让咱们的文章呈现更加丰富的格式，例如标题、列表、代码块等等 HTML 元素。因为 Markdown 语法简单直观，不用超过 5 分钟就能够掌握经常使用的标记语法，所以你们青睐使用 Markdown 书写 HTML 文档。下面让咱们的博客也支持使用 Markdown 书写。

安装 Python Markdown

将 Markdown 格式的文本渲染成标准的 HTML 文档是一个复杂的工做，好在已有好心人帮咱们完成了这些工做，咱们直接使用便可。首先安装 Markdown，这是一个 Python 第三方库，激活虚拟环境，而后使用命令 pip install markdown 安装便可。

在 detail 视图中渲染 Markdown

将 Markdown 格式的文本渲染成 HTML 文本很是简单，只需调用这个库的 markdown 方法便可。咱们书写的博客文章内容存在 Post 的 body 属性里，回到咱们的详情页视图函数，对 post 的 body 的值作一下渲染，把 Markdown 文本转为 HTML 文本再传递给模板：

blog/views.py

import markdown
from django.shortcuts import render, get_object_or_404
from .models import Post

def detail(request, pk):
    post = get_object_or_404(Post, pk=pk)
    # 记得在顶部引入 markdown 模块
    post.body = markdown.markdown(post.body,
                                  extensions=[
                                     'markdown.extensions.extra',
                                     'markdown.extensions.codehilite',
                                     'markdown.extensions.toc',
                                  ])
    return render(request, 'blog/detail.html', context={'post': post})复制代码

这样咱们在模板中展现 {{ post.body }} 的时候，就再也不是原始的 Markdown 文本了，而是渲染事后的 HTML 文本。注意这里咱们给 markdown 渲染函数传递了额外的参数 extensions，它是对 Markdown 语法的拓展，这里咱们使用了三个拓展，分别是 extra、codehilite、toc。extra 自己包含不少拓展，而 codehilite 是语法高亮拓展，这为咱们后面的实现代码高亮功能提供基础，而 toc 则容许咱们自动生成目录（在之后会介绍）。

来测试一下效果，进入后台，此次咱们发布一篇用 Markdown 语法写的测试文章看看，你可使用如下的 Markdown 测试代码进行测试，也能够本身书写你喜欢的 Markdown 文本。假设你是 Markdown 新手参考一下这些教程，必定学一下，保证你能够在 5 分钟内掌握经常使用的语法格式，而之后对你写做受用无穷。可谓充电五分钟，通话 2 小时。如下是我学习中的一些参考资料：

• Markdown——入门指南
• Markdown 语法说明 (简体中文版)

# 一级标题

## 二级标题

### 三级标题

- 列表项1
- 列表项2
- 列表项3

> 这是一段引用

​```python def detail(request, pk): post = get_object_or_404(Post, pk=pk) post.body = markdown.markdown(post.body, extensions=[ 'markdown.extensions.extra', 'markdown.extensions.codehilite', 'markdown.extensions.toc', ]) return render(request, 'blog/detail.html', context={'post': post}) ​复制代码

**若是你发现没法显示代码块，即代码没法换行，请检查代码块的语法是否书写有误。代码块的语法如上边的测试文本中最后一段所示。**

你可能想在文章中插入图片，目前能作的且推荐作的是使用外链引入图片。好比将图片上传到七牛云这样的云存储服务器，而后经过 Markdown 的图片语法将图片引入。Markdown 引入图片的语法为：`![图片说明](图片连接)`。

## safe 标签

咱们在发布的文章详情页没有看到预期的效果，而是相似于一堆乱码同样的 HTML 标签，这些标签本应该在浏览器显示它自己的格式，可是 Django 出于安全方面的考虑，任何的 HTML 代码在 Django 的模板中都会被转义（即显示原始的 HTML 代码，而不是经浏览器渲染后的格式）。为了解除转义，只需在模板标签使用 `safe` 过滤器便可，告诉 Django，这段文本是安全的，你什么也不用作。在模板中找到展现博客文章主体的 {{ post.body }} 部分，为其加上 safe 过滤器，{{ post.body|safe }}，大功告成，这下看到预期效果了。

safe 是 Django 模板系统中的过滤器（Filter），能够简单地把它当作是一种函数，其做用是做用于模板变量，将模板变量的值变为通过滤器处理事后的值。例如这里 {{ post.body|safe }}，原本 {{ post.body }} 经模板系统渲染后应该显示 body 自己的值，可是在后面加上 safe 过滤器后，渲染的值再也不是body 自己的值，而是由 safe 函数处理后返回的值。过滤器的用法是在模板变量后加一个 | 管道符号，再加上过滤器的名称。能够连续使用多个过滤器，例如 {{ var|filter1|filter2 }}。

![Markdown 测试](https://user-gold-cdn.xitu.io/2017/5/17/d54161784413c00de35d93f19569d2e8)

## 代码高亮

程序员写博客免不了要插入一些代码，Markdown 的语法使咱们容易地书写代码块，可是目前来讲，显示的代码块里的代码没有任何颜色，很不美观，也难以阅读，要是可以像咱们的编辑器里同样让代码高亮就行了。虽然咱们在渲染时使用了 codehilite 拓展，但这只是实现代码高亮的第一步，还须要简单的几步才能达到咱们的最终目的。

### 安装 Pygments

首先咱们须要安装 Pygments，**激活虚拟环境**，运行： `pip install Pygments` 安装便可。

搞定了，虽然咱们除了安装了一下 Pygments 什么也没作，但 Markdown 使用 Pygments 在后台为咱们作了不少事。若是你打开博客详情页，找到一段代码段，在浏览器查看这段代码段的 HTML 源代码，能够发现 Pygments 的工做原理是把代码切分红一个个单词，而后为这些单词添加 css 样式，不一样的词应用不一样的样式，这样就实现了代码颜色的区分，即高亮了语法。为此，还差最后一步，引入一个样式文件来给这些被添加了样式的单词定义颜色。

### 引入样式文件

在项目的 blog\static\blog\css\highlights\ 目录下应该能看到不少 .css 样式文件，这些文件是用来提供代码高亮样式的。选择一个你喜欢的样式文件，在 base.html 引入便可（别忘了使用 static 模板标签）。好比我比较喜欢 github.css 的样式，那么引入这个文件：

```html
templates/base.html

...
<link rel="stylesheet" href="{% static 'blog/css/pace.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/custom.css' %}">
...
+ <link rel="stylesheet" href="{% static 'blog/css/highlights/github.css' %}">复制代码

这里 + 号表示添加这行代码。好了，看看效果，大功告成，终于能够愉快地贴代码了。

代码高亮

注意：若是你按照教程中的方法作完后发现代码依然没有高亮，请依次检查如下步骤：

1. 确保在渲染文本时添加了 markdown.extensions.codehilite 拓展，详情见上文。
2. 确保安装了 Pygments。
3. 确保代码块的 Markdown 语法正确，特别是指明该代码块的语言类型，具体请参见上文中 Markdown 的语法示例。
4. 在浏览器端代码块的源代码，看代码是否被 pre 标签包裹，而且代码的每个单词都被 span 标签包裹，且有一个 class 属性值。若是没有，极有多是前三步中某个地方出了问题。
5. 确保用于代码高亮的样式文件被正确地引入，具体请参见上文中引入样式文件的讲解。
6. 有些样式文件可能对代码高亮没有做用，首先尝试用 github.css 样式文件作测试。

总结

本章节的代码位于：Step9: markdown and code highlight supported。

若是遇到问题，请经过下面的方式寻求帮助。

• 在 支持 Markdown 语法和代码高亮 - 追梦人物的博客 的评论区留言。
• 将问题的详细描述经过邮件发送到 djangostudyteam@163.com，通常会在 24 小时内回复。