当前位置: 首页 > 后端技术 > Python

HelloDjangoPart09:让博客支持Markdown语法和代码高亮

时间:2023-03-26 12:20:16 Python

作者:HelloGitHub-文章中涉及的示例代码已经更新到HelloGitHub-团队仓库,为了让博客文章有更好的排版和更丰富的展示格式,我们使用Markdown语法来写博客文章。Markdown是一种HTML文本标记语言。只要遵循其约定的语法格式,Markdown的解析工具就可以将Markdown文档转换为标准的HTML文档,从而使文章以更丰富的格式呈现,如标题、列表、代码块等和其他HTML元素。因为Markdown语法简单直观,不到5分钟就可以轻松掌握常用的标记语法,所以大家更喜欢使用Markdown来编写HTML文档。让我们的博客也支持Markdown写作吧。安装PythonMarkdown并将Markdown格式的文本解析成标准的HTML文档是一个复杂的工程。幸好有好心人帮我们完成了这些任务,我们可以直接使用了。首先安装Markdown,这是一个Python的第三方库,在项目根目录运行命令pipenvinstallmarkdown。解析Markdown详解将Markdown格式的文本解析成HTML文本非常简单,只需要调用这个库的markdown方法即可。我们写的博客文章的内容存放在Post的body属性中。回到我们的详情页视图函数,分析帖子正文的值,将Markdown文本转换成HTML文本并传递给模板:blog/views.pyimportmarkdownfromdjango.shortcutsimportget_object_or_404,renderfrom.modelsimportPostdef细节(请求,pk):post=get_object_or_404(Post,pk=pk).extensions.toc',])returnrender(request,'blog/detail.html',context={'post':post})这样我们在模板post.body中显示{{}},就不再是原始Markdown文本,但解析后的H??TML文本。注意这里我们给markdown解析函数传递了一个额外的参数extensions,它是Markdown语法的扩展。这里我们使用三个扩展,分别是extra、codehilite和toc。extra本身包含很多基础扩展,codehilite是一个语法高亮扩展,为后面代码高亮的实现提供基础,toc允许自动生成目录(后面会介绍)。我们来测试一下效果,进入后台。这次我们发布了一篇用Markdown语法写的测试文章。你可以使用下面的Markdown测试代码进行测试,也可以自己编写自己喜欢的Markdown文本。假设您是Markdown新手,请参阅这些教程。一定要学好它,保证你能在5分钟内掌握常用的语法格式,对你以后的写作大有裨益。可以说充电5分钟通话2小时。以下是我学习中的一些参考资料:Markdown——入门指南Markdown语法说明#一级标题##二级标题###三级标题-listitem1-listitem2-listitem3>这是一个引用```pythondefdetail(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',])returnrender(request,'blog/detail.html',context={'post':post})```如果发现代码块无法显示,即代码Unabletowrap。请检查代码块的语法是否有拼写错误。代码块的语法显示在上面测试文本的最后一段中。您可能想在文章中插入图片。你可以做的和推荐的是使用外部链接来介绍图片。比如将图片上传到七牛云这样的云存储服务器,然后通过Markdown的图片语法导入图片。Markdown中导入图片的语法为:![图片描述](图片链接)。safetag我们在发布的文章详情页上并没有看到预期的效果,而是一堆乱码的HTML标签。这些标签应该在浏览器中显示它们自己的格式,但是出于安全原因,django,django的模板中的任何HTML代码都会被转义(即显示原始HTML代码,而不是浏览器呈现的格式)。要取消转义,只需在模板变量后使用安全过滤器来告诉django此文本是安全的,您无需执行任何操作。找到模板中显示博文内容的{{post.body}}部分,为其添加安全过滤器:{{post.body|safe}},大功告成,现在可以看到预期效果。safe是django模板系统中的一个过滤器(Filter)。可以简单的看成是一个作用于模板变量的函数,将模板变量的值变成过滤器处理后的值。比如这里的{{post.body|safe}},本来{{post.body}}应该是在模板系统渲染后显示body本身的值,但是加上safefilter后,渲染出来的值是no不再是主体本身,而是经过安全函数处理后返回的值。过滤器的用法是添加一个|模板变量后的管道符号,后跟过滤器的名称。可以连续使用多个过滤器,例如{{var|filter1|filter2}}。代码高亮程序员在写博客时不可避免地要插入一些代码。Markdown的语法让我们很容易编写代码块。就像在代码编辑器中一样让代码突出显示。我们借助js插件来实现代码高亮。原理是js解析整个html页面,然后找到代码块元素,给代码块中的元素添加样式。我们使用的插件叫highlight.js和highlightjs-line-numbers.js,前者提供基本的代码高亮,后者为代码块添加行号。首先介绍base.html的head标签中代码高亮的样式。有多种款式供您选择。这里我们选择GitHub主题的风格。通过CDN直接导入样式文件,在style标签中自定义了一点元素样式,让代码块的展示效果更加完美。...然后导入js文件,因为插件要等到整个页面加载完毕才解析代码块,所以把js文件的介绍放在body底部:<正文>很简单,导入highlight.js和highlightjs-通过CDNline-numbers.js,再初始化两个插件,看看效果,完美!欢迎关注HelloGitHub公众号,获取更多开源项目资讯和内容《详解开源项目系列》上线-让人们对开源项目产生兴趣,有兴趣的人不再害怕,开源项目的发起者不再孤单。关注我们的文章,你会发现编程的乐趣,使用并发现它是多么的容易参与开源项目,欢迎联系我们投稿,让更多人热爱开源,为开源贡献力量~