轻松记录您
灵感和创意

使用Markdown语法书写文章

上一章我们实现了文章详情页面。为了让文章正文能够进行标题、加粗、引用、代码块等不同的排版(像在Office中那样!),我们将使用Markdown语法。

安装Markdown

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

关于Markdown语法看这里:Markdown 语法介绍

安装Markdown也很简单:进入虚拟环境,输入指令pip install Markdown即可。

使用Markdown

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

article/views.py…# 引入Markdown模块import Markdowndef 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则是后面要使用的代码高亮扩展。

然后,修改templates/article/detail.html中有关文章正文的部分:

templates/article/detail.html…# 在 article.body 后加上 |safe 过滤器

{{ article.body|safe }}

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

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

启动服务器,在后台中新录入一条用Markdown语法书写的文章,内容如下:

# 国风·周南·关雎—**关关雎鸠,在河之洲。窈窕淑女,君子好逑。**参差荇菜,左右流之。窈窕淑女,寤寐求之。—+ 列表一+ 列表二    + 列表二-1    + 列表二-2—pythondef article_detail(request, id): article = ArticlePost.objects.get(id=id) # 将<strong>Markdown</strong>语法渲染成html样式 article.body = <strong>Markdown</strong>.<strong>Markdown</strong>(article.body, extensions=[ # 包含 缩写、表格等常用扩展 '<strong>Markdown</strong>.extensions.extra', # 语法高亮扩展 '<strong>Markdown</strong>.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……

重新启动服务器,顺利的话看到如下:

除了Monokai这个深色的样式外,Pygments还内置了很多其他的样式,这个就看喜好选择了。

未经允许不得转载:坚果之云 Markdown » 使用Markdown语法书写文章
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍