企业免费网站模板,品牌高端网站制作机构,espcms易思企业网站管理系统破解,成立门户网站建设工作小组文章目录0.前言1.安装 Python Markdown2.在 detail 视图中解析 Markdown3.safe 标签4.代码高亮5.效果展示0.前言
Markdown 是一种 HTML 文本标记语言#xff0c;只要遵循它约定的语法格式#xff0c;Markdown 的解析工具就能够把 Markdown 文档转换为标准的 HTML 文档#…
文章目录0.前言1.安装 Python Markdown2.在 detail 视图中解析 Markdown3.safe 标签4.代码高亮5.效果展示0.前言
Markdown 是一种 HTML 文本标记语言只要遵循它约定的语法格式Markdown 的解析工具就能够把 Markdown 文档转换为标准的 HTML 文档从而使文章呈现更加丰富的格式例如标题、列表、代码块等等 HTML 元素。
1.安装 Python Markdown
将 Markdown 格式的文本解析成标准的 HTML 文档是一个复杂的工程好在已有好心人帮我们完成了这些工作直接拿来使用即可。首先安装 Markdown这是一个 Python 第三方库在项目根目录下运行命令 pipenv install markdown
2.在 detail 视图中解析 Markdown
将 Markdown 格式的文本解析成 HTML 文本非常简单只需调用这个库的 markdown 方法。我们书写的博客文章内容存在 Post 的 body 属性里回到我们的详情页视图函数对 post 的 body 的值做一下解析把 Markdown 文本转为 HTML 文本再传递给模板
文件位置blog/views.py
import markdown
from django.shortcuts import get_object_or_404, renderfrom .models import Postdef detail(request, pk):post get_object_or_404(Post, pkpk)post.body markdown.markdown(post.body,extensions[markdown.extensions.extra,markdown.extensions.codehilite,markdown.extensions.toc,])return render(request, blog/detail.html, context{post: post})这样我们在模板中显示 {{ post.body }} 的时候就不再是原始的 Markdown 文本了而是解析过后的 HTML 文本。
注意这里我们给 markdown 解析函数传递了额外的参数 extensions它是对 Markdown 语法的拓展这里使用了三个拓展分别是 extra、codehilite、toc。extra 本身包含很多基础拓展而 codehilite 是语法高亮拓展这为后面的实现代码高亮功能提供基础而 toc 则允许自动生成目录。
Markdown——入门指南戳这里 Markdown 语法说明戳这里
3.safe 标签
如果此时运行服务器在发布的文章详情页会出现类似于一堆乱码一样的 HTML 标签这些标签本应该在浏览器显示它自身的格式但是 django 出于安全方面的考虑任何的 HTML 代码在 django 的模板中都会被转义即显示原始的 HTML 代码而不是经浏览器渲染后的格式。
为了解除转义只需在模板变量后使用 safe 过滤器即可告诉 django这段文本是安全的你什么也不用做。在模板中找到展示博客文章内容的 {{ post.body }} 部分为其加上 safe 过滤器{{ post.body|safe }}
4.代码高亮
代码高亮我们借助 js 插件来实现其原理就是 js 解析整个 html 页面然后找到代码块元素为代码块中的元素添加样式。我们使用的插件叫做 highlight.js 和 highlightjs-line-numbers.js前者提供基础的代码高亮后者为代码块添加行号。
首先在 base.html 的 head 标签里引入代码高亮的样式有多种样式供你选择这里我们选择 GitHub 主题的样式。样式文件直接通过 CDN 引入同时在 style 标签里自定义了一点元素样式使得代码块的显示效果更加完美。
head...link hrefhttps://cdn.bootcss.com/highlight.js/9.15.8/styles/github.min.css relstylesheetstyle.codehilite {padding: 0;}/* for block of numbers */.hljs-ln-numbers {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;text-align: center;color: #ccc;border-right: 1px solid #CCC;vertical-align: top;padding-right: 5px;}.hljs-ln-n {width: 30px;}/* for block of code */.hljs-ln .hljs-ln-code {padding-left: 10px;white-space: pre;}/style
/head然后是引入 js 文件因为应该等整个页面加载完插件再去解析代码块所以把 js 文件的引入放在 body 底部
bodyscript srchttps://cdn.bootcss.com/highlight.js/9.15.8/highlight.min.js/scriptscript srchttps://cdn.bootcss.com/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js/scriptscripthljs.initHighlightingOnLoad();hljs.initLineNumbersOnLoad();/script
/body5.效果展示
在后台添加Markdown格式文章如下 运行服务器效果如下
