Django搭建我的博客：使用Markdown语法书写文章

时间 2019-11-21

标签 django 搭建我的博客使用 markdown 语法书写文章栏目 Python 繁體版

原文原文链接

上一章咱们实现了文章详情页面。为了让文章正文可以进行标题、加粗、引用、代码块等不一样的排版（像在Office中那样！），咱们将使用Markdown语法。css

安装Markdown

Markdown是一种轻量级的标记语言，它容许人们“使用易读易写的纯文本格式编写文档，而后转换成有效的或者HTML文档。建议读者必定要花五分钟时间熟悉一下Markdown的语法，熟练后码字效率必定会大幅提升。html

关于Markdown语法看这里：Markdown 语法介绍python

安装markdown也很简单：进入虚拟环境，输入指令pip install markdown便可。git

使用Markdown

为了将Markdown语法书写的文章渲染为HTML文本，首先改写article/views.py的article_detail()：github

article/views.py

...

# 引入markdown模块
import markdown

def article_detail(request, id):
    article = ArticlePost.objects.get(id=id)

    # 将markdown语法渲染成html样式
    article.body = markdown.markdown(article.body,
        extensions=[
        # 包含 缩写、表格等经常使用扩展
        'markdown.extensions.extra',
        # 语法高亮扩展
        'markdown.extensions.codehilite',
        ])

    context = { 'article': article }
    return render(request, 'article/detail.html', context)

代码中markdown.markdown语法接收两个参数：第一个参数是须要渲染的文章正文article.body；第二个参数载入了经常使用的语法扩展，markdown.extensions.extra中包括了缩写、表格等扩展，markdown.extensions.codehilite则是后面要使用的代码高亮扩展。django

而后，修改templates/article/detail.html中有关文章正文的部分：bootstrap

templates/article/detail.html

...

# 在 article.body 后加上 |safe 过滤器
<p>{{ article.body|safe }}</p>

Django出于安全的考虑，会将输出的HTML代码进行转义，这使得article.body中渲染的HTML文本没法正常显示。管道符|是Django中过滤器的写法，而|safe就相似给article.body贴了一个标签，表示这一段字符不须要进行转义了。安全

这样就把Markdown语法配置好了。bash

启动服务器，在后台中新录入一条用markdown语法书写的文章，内容以下：服务器

# 国风·周南·关雎
---
**关关雎鸠，在河之洲。窈窕淑女，君子好逑。**

参差荇菜，左右流之。窈窕淑女，寤寐求之。

---
+ 列表一
+ 列表二
    + 列表二-1
    + 列表二-2
---

```python
def article_detail(request, id):
    article = ArticlePost.objects.get(id=id)
    # 将markdown语法渲染成html样式
    article.body = markdown.markdown(article.body,
        extensions=[
        # 包含 缩写、表格等经常使用扩展
        'markdown.extensions.extra',
        # 语法高亮扩展
        'markdown.extensions.codehilite',
        ])
    context = { 'article': article }
    return render(request, 'article/detail.html', context)
```

返回文章详情，结果以下：

很好，可是代码块仍是不怎么好看。

写技术文章没有代码高亮怎么行。继续努力。

代码高亮

在static目录中新建一个目录md_css/，一下子放置代码高亮的样式文件。

从新打开一个命令行窗口，进入虚拟环境，安装Pygments：pip install Pygments

Pygments是一种通用语法高亮显示器，能够帮助咱们自动生成美化代码块的样式文件。

在命令行中进入刚才新建的md_css目录中，输入Pygments指令：

pygmentize -S monokai -f html -a .codehilite > monokai.css

这里有一点须要注意, 生成命令中的 -a 参数须要与真实页面中的 CSS Selector 相对应，即.codehilite这个字段在有些版本中应写为.highlight。若是后面的代码高亮无效，极可能是这里出了问题。

回车后检查一下，在md_css目录中是否自动生成了一个叫monokai.css的文件，这是一个深色背景的高亮样式文件。

接下来咱们在base.html中引用这个文件：

templates/base.html

<head>
    ...
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    
    <!-- 引入monikai.css -->
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
    
</head>
...

从新启动服务器，顺利的话看到以下：

除了Monokai这个深色的样式外，Pygments还内置了不少其余的样式，这个就看喜爱选择了。

各类不一样样式能够在这里参照：pygments-css

总结

本章引进了Markdown语法以及代码高亮扩展，今后能够写排版漂亮的文章正文了。

下一章将学习如何建立一篇新的文章。

有疑问请在杜赛的我的网站留言，我会尽快回复。
或Email私信我：dusaiphoto@foxmail.com
项目完整代码：Django_blog_tutorial

转载请告知做者并注明出处。