首页 » 网站建设 » markdownphp代码高亮技巧_第 09 篇让博客支持 Markdown 语法和代码高亮

markdownphp代码高亮技巧_第 09 篇让博客支持 Markdown 语法和代码高亮

访客 2024-12-10 0

扫一扫用手机浏览

文章目录 [+]

安装 Python Markdown

将 Markdown 格式的文本解析成标准的 HTML 文档是一个繁芜的工程,好在已有好心人帮我们完成了这些事情,直接拿来利用即可。
首先安装 Markdown,这是一个 Python 第三方库,在项目根目录下运行命令 pipenv install markdown。

markdownphp代码高亮技巧_第 09 篇让博客支持 Markdown 语法和代码高亮

在 detail 视图中解析 Markdown

markdownphp代码高亮技巧_第 09 篇让博客支持 Markdown 语法和代码高亮
(图片来自网络侵删)

将 Markdown 格式的文本解析成 HTML 文本非常大略,只需调用这个库的 markdown 方法。
我们书写的博客文章内容存在 Post 的 body 属性里,回到我们的详情页视图函数,对 post 的 body 的值做一下解析,把 Markdown 文本转为 HTML 文本再通报给模板:

blog/views.pyimport markdownfrom django.shortcuts import get_object_or_404, renderfrom .models import Postdef detail(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', ]) return render(request, 'blog/detail.html', context={'post': post})

这样我们在模板中显示 {{ post.body }} 的时候,就不再是原始的 Markdown 文本了,而是解析过后的 HTML 文本。
把稳这里我们给 markdown 解析函数通报了额外的参数 extensions,它是对 Markdown 语法的拓展,这里利用了三个拓展,分别是 extra、codehilite、toc。
extra 本身包含很多根本拓展,而 codehilite 是语法高亮拓展,这为后面的实当代码高亮功能供应根本,而 toc 则许可自动天生目录(在往后会先容)。

来测试一下效果,进入后台,这次我们发布一篇用 Markdown 语法写的测试文章看看,你可以利用以下的 Markdown 测试代码进行测试,也可以自己书写你喜好的 Markdown 文本。
假设你是 Markdown 新手请参考一下这些教程,一定学一下,担保你可以在 5 分钟内节制常用的语法格式,而往后对你写作受用无穷。
可谓充电 5 分钟,通话 2 小时。
以下是我学习中的一些参考资料:

•Markdown——入门指南[2]

•Markdown 语法解释[3]

# 一级标题## 二级标题### 三级标题- 列表项1- 列表项2- 列表项3> 这是一段引用```pythondef detail(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', ]) return render(request, 'blog/detail.html', context={'post': post})​```

如果你创造无法显示代码块,即代码无法换行,请检讨代码块的语法是否书写有误。
代码块的语法如上边的测试文本中末了一段所示。

你可能想在文章中插入图片,目前能做的且推举做的是利用外链引入图片。
比如将图片上传到七牛云这样的云存储做事器,然后通过 Markdown 的图片语法将图片引入。
Markdown 引入图片的语法为:![图片解释](图片链接)。

safe 标签

我们在发布的文章详情页没有看到预期的效果,而是类似于一堆乱码一样的 HTML 标签,这些标签本该当在浏览器显示它自身的格式,但是 django 出于安全方面的考虑,任何的 HTML 代码在 django 的模板中都会被转义(即显示原始的 HTML 代码,而不是经浏览器渲染后的格式)。
为理解除转义,只需在模板变量后利用 safe 过滤器即可,见告 django,这段文本是安全的,你什么也不用做。
在模板中找到展示博客文章内容的 {{ post.body }} 部分,为其加上 safe 过滤器:{{ post.body|safe }},大功告成,这下看到预期效果了。

safe 是 django 模板系统中的过滤器(Filter),可以大略地把它算作是一种函数,其浸染是浸染于模板变量,将模板变量的值变为经由滤器处理过后的值。
例如这里 {{ post.body|safe }},本来 {{ post.body }}经模板系统渲染后该当显示 body 本身的值,但是在后面加上 safe 过滤器后,渲染的值不再是 body 本身的值,而是由 safe 函数处理后返回的值。
过滤器的用法是在模板变量后加一个 | 管道符号,再加上过滤器的名称。
可以连续利用多个过滤器,例如 {{ var|filter1|filter2 }}。

代码高亮

程序员写博客免不了要插入一些代码,Markdown 的语法使我们随意马虎地书写代码块,但是目前来说,显示的代码块里的代码没有任何颜色,很不雅观观,也难以阅读,假如能够像代码编辑器里一样让代码高亮就好了。

代码高亮我们借助 js 插件来实现,其事理便是 js 解析全体 html 页面,然后找到代码块元素,为代码块中的元素添加样式。
我们利用的插件叫做 highlight.js 和 highlightjs-line-numbers.js,前者供应根本的代码高亮,后者为代码块添加行号。

首先在 base.html 的 head 标签里引入代码高亮的样式,有多种样式供你选择,这里我们选择 GitHub 主题的样式。
样式文件直接通过 CDN 引入,同时在 style 标签里自定义了一点元素样式,使得代码块的显示效果更加完美。

<head> ... <link href=\"大众https://cdn.bootcss.com/highlight.js/9.15.8/styles/github.min.css\"大众 rel=\"大众stylesheet\公众> <style> .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; ~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 底部:

<body> <script src=\"大众https://cdn.bootcss.com/highlight.js/9.15.8/highlight.min.js\"大众></script> <script src=\"大众https://cdn.bootcss.com/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js\公众></script> <script> hljs.initHighlightingOnLoad(); hljs.initLineNumbersOnLoad(); </script></body>

非常大略,通过 CDN 引入 highlight.js 和 highlightjs-line-numbers.js,然后初始化了两个插件。
再来看下效果,非常完美!

References

[1] HelloGitHub-Team 仓库: https://github.com/HelloGitHub-Team/HelloDjango-blog-tutorial

[2] Markdown——入门指南: http://www.jianshu.com/p/1e402922ee32/

[3] Markdown 语法解释: http://www.appinn.com/markdown/

欢迎关注 HelloGitHub "大众号,获取更多开源项目的资料和内容

『讲解开源项目系列』启动——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。
随着我们的文章,你会创造编程的乐趣、利用和创造参与开源项目如此大略。
欢迎联系我们给我们投稿,让更多人爱上开源、贡献开源~

相关文章

php为无色透明技巧_水货钻石其实也还行

从各种钻石中,可以看到大大小小的“包裹体” 图片来源:参考文献包裹体的种类多样。比钻石形成更早的包裹体,叫“原生包裹体”;与钻石同...

网站建设 2024-12-19 阅读1 评论0

phpstudy发送gbk技巧_php的文件上传

这里首先声明一下这一章的内容比较多,比较难,你要抱着和自己去世磕的态度。细微之处不放过,多敲多练是王道。 学习就像爬山,得一步一步...

网站建设 2024-12-19 阅读1 评论0