Advertisement

Django搭建个人博客:使用Markdown语法书写文章

阅读量:

在之前的章节中,我们开发了文章详情页面。为了使文章正文实现标题、加粗文字、引用标注以及代码块等多样化的排版效果(类似于Word这样的办公软件),我们将采用Markdown格式进行设置。

安装Markdown

Markdown 属于轻量级标记语言家族的一员。它使得人们能够以易于阅读和书写的纯文本形式编写文档。这些文档进而生成为有效的或 HTML 格式的文件。建议读者务必投入大约五分钟的时间来掌握 Markdown 的基本规则。熟练之后可以使文字输入效率显著提升。

有关Markdown语法,在此可查阅Markdown 语法介绍

安装MarkDown工具也相当简便:切换到虚拟环境中,并输入指令 pip install markdown 即可。

使用Markdown

旨在将Markdown标记语言编写的文章转换为HTML文本内容。随后进行代码修改。

复制代码
    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则将被用作后续实现代码高亮效果的工具。

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

复制代码
    templates/article/detail.html
    
    ...
    
    # 在 article.body 后加上 |safe 过滤器
    <p>{{ article.body|safe }}</p>

Django为了提高安全性,在输出HTML代码时会进行转义处理这使得在article.body字段渲染的内容无法正确呈现。在Django中使用管道符号作为过滤器表达方式时,默认会对大部分字符进行处理操作但不会影响到标注为|safe的部分这些被特别标识的内容可以安全地直接显示出来而不受其他过滤操作的影响

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

启动服务器,在后台中新录入一条用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/,一会儿放置代码高亮的样式文件。

在终端中新建一个终端窗口,在其中切换到虚拟环境并执行以下操作:切换到虚拟环境后,在终端中输入命令pip install Pygments以完成Pygments的安装

Pygments被广泛认为是一种通用语法高亮显示器,并且能够自动生成美化代码块的样式表。

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

复制代码
    pygmentize -S monokai -f html -a .codehilite > monokai.css

这里有一点不可忽视, 在生成命令中使用的 -a 参数必须与真实页面中的 CSS 选区器相对应, 即 .codehilite 选区器通常建议采用 .highlight 来替代. 如果后续代码无法实现高亮效果, 这很可能是因为上述配置存在潜在问题.

按回车键后进行检查,在位于md_css目录中的一个名为monokai.css的文件是否存在?这是一个采用.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提供了多种多样的样式选择,选择取决于个人偏好。

多种不同样式可供在此处参考该仓库项目以获取所需配置信息

总结

本章讲解了Markdown语法体系以及代码块高亮功能,并从此能够撰写出美观排版的正文字体内容。

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

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

全部评论 (0)

还没有任何评论哟~