摘要:重新打开一个命令行窗口,进入虚拟环境,安装是一种通用语法高亮显示器,可以帮助我们自动生成美化代码块的样式文件。
上一章我们实现了文章详情页面。为了让文章正文能够进行标题、加粗、引用、代码块等不同的排版(像在Office中那样!),我们将使用Markdown语法。
安装MarkdownMarkdown是一种轻量级的标记语言,它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的或者HTML文档。建议读者一定要花五分钟时间熟悉一下Markdown的语法,熟练后码字效率一定会大幅提高。
关于Markdown语法看这里:Markdown 语法介绍
安装markdown也很简单:进入虚拟环境,输入指令pip install markdown即可。
使用Markdown为了将Markdown语法书写的文章渲染为HTML文本,首先改写article/views.py的article_detail():
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 过滤器{{ article.body|safe }}
Django出于安全的考虑,会将输出的HTML代码进行转义,这使得article.body中渲染的HTML文本无法正常显示。管道符|是Django中过滤器的写法,而|safe就类似给article.body贴了一个标签,表示这一段字符不需要进行转义了。
这样就把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/,一会儿放置代码高亮的样式文件。
重新打开一个命令行窗口,进入虚拟环境,安装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还内置了很多其他的样式,这个就看喜好选择了。
各种不同样式可以在这里参照:pygments-css
总结本章引进了Markdown语法以及代码高亮扩展,从此可以写排版漂亮的文章正文了。
下一章将学习如何创建一篇新的文章。
有疑问请在杜赛的个人网站留言,我会尽快回复。
或Email私信我:dusaiphoto@foxmail.com
项目完整代码:Django_blog_tutorial
转载请告知作者并注明出处。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/42487.html
摘要:一些表单界面元素文本框或复选框非常简单并内置在中,而其他会复杂些像弹出日期选择等操作控件。和标签中的属性指定了当前文本框提交的数据的名称,它必须与表单类中的字段名称对应,否则服务器无法将字段和数据正确的对应起来。 前面我们已经学会如何用Markdown语法书写文章了。 但是还有问题呀。之前写文章都是在后台中进行的,万一有别的普通用户也要发表文章怎么办?万一我想拓展些后台中没有的提交验证...
摘要:语法支持再次打开文件,在文件的最后添加指明了使用语法标记,做了两个拓展,其中表示支持语法高亮,包含的特性请参见相关文档。语法高亮支持注意这一步必须在安装完主题之后。 目前网上搭建个人博客的方案很多,虽然使用诸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齐全的高性能个人博客,但是本文将尝试一种更为小众化的方案 —— 一款基于 dj...
摘要:博文也是同样的,好的目录对博主和读者都很有帮助。文中的目录之前我们已经为博文支持了语法,现在继续增强其功能。修改文章详情视图文章详情目录扩展仅仅是将将扩展添加了进去。通过将目录传递给模板。 对会读书的人来说,读一本书要做的第一件事,就是仔细阅读这本书的目录。阅读目录可以对整体内容有所了解,并清楚地知道感兴趣的部分在哪里,提高阅读质量。 博文也是同样的,好的目录对博主和读者都很有帮助。更...
摘要:注意如果你按照教程中的方法做完后发现代码依然没有高亮,请依次检查以下步骤确保在渲染文本时添加了拓展,详情见上文。有些样式文件可能对代码高亮没有作用,首先尝试用样式文件做测试。在支持语法和代码高亮追梦人物的博客的评论区留言。 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书写我们的博文。Markdown 是一种 HTML 文本标记语言,只要遵循它约定...
摘要:后面两个编辑器自带,不用单独下载,添上就可以了添加相关插件这样就完成了代码高亮效果不错在前台使用为了让用户在前台也能使用富文本编辑器,还得对代码稍加改动。对于有些不喜欢的人来说,甚至可以连博文都使用提供的富文本编辑器。 前面我们已经实现了用Markdown语法写文章了。但是文章的评论用Markdown就不太合适了,你不能强求用户也花时间去熟悉语法啊。另外评论中通常还有表情、带颜色的字体...
阅读 959·2023-04-25 14:41
阅读 2406·2021-09-28 09:35
阅读 3575·2019-08-30 15:53
阅读 1901·2019-08-29 15:26
阅读 963·2019-08-28 17:59
阅读 3752·2019-08-26 13:45
阅读 2805·2019-08-26 13:33
阅读 1603·2019-08-26 11:46