作者：HelloGitHub-追夢人物

文中涉及的示例代碼，已同步更新到HelloGitHub-Team 倉庫[1]

為了讓博客文章具有良好的排版，顯示更加豐富的格式，我們使用 Markdown 語法來書寫博文。Markdown 是一種 HTML 文本標(biāo)記語言，只要遵循它約定的語法格式，Markdown 的解析工具就能夠把 Markdown 文檔轉(zhuǎn)換為標(biāo)準(zhǔn)的 HTML 文檔，從而使文章呈現(xiàn)更加豐富的格式，例如標(biāo)題、列表、代碼塊等等 HTML 元素。由于 Markdown 語法簡單直觀，不用超過 5 分鐘就可以輕松掌握常用的標(biāo)記語法，因此大家青睞使用 Markdown 書寫 HTML 文檔。下面讓我們的博客也支持使用 Markdown 寫作。

安裝 Python Markdown

將 Markdown 格式的文本解析成標(biāo)準(zhǔn)的 HTML 文檔是一個(gè)復(fù)雜的工程，好在已有好心人幫我們完成了這些工作，直接拿來使用即可。首先安裝 Markdown，這是一個(gè) Python 第三方庫，在項(xiàng)目根目錄下運(yùn)行命令 pipenv install markdown。

在 detail 視圖中解析 Markdown

將 Markdown 格式的文本解析成 HTML 文本非常簡單，只需調(diào)用這個(gè)庫的 markdown 方法。我們書寫的博客文章內(nèi)容存在 Post 的 body 屬性里，回到我們的詳情頁視圖函數(shù)，對(duì) post 的 body 的值做一下解析，把 Markdown 文本轉(zhuǎn)為 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})

這樣我們?cè)谀０逯酗@示 {{ post.body }} 的時(shí)候，就不再是原始的 Markdown 文本了，而是解析過后的 HTML 文本。注意這里我們給 markdown 解析函數(shù)傳遞了額外的參數(shù) extensions，它是對(duì) Markdown 語法的拓展，這里使用了三個(gè)拓展，分別是 extra、codehilite、toc。extra 本身包含很多基礎(chǔ)拓展，而 codehilite 是語法高亮拓展，這為后面的實(shí)現(xiàn)代碼高亮功能提供基礎(chǔ)，而 toc 則允許自動(dòng)生成目錄(在以后會(huì)介紹)。

來測試一下效果，進(jìn)入后臺(tái)，這次我們發(fā)布一篇用 Markdown 語法寫的測試文章看看，你可以使用以下的 Markdown 測試代碼進(jìn)行測試，也可以自己書寫你喜歡的 Markdown 文本。假設(shè)你是 Markdown 新手請(qǐng)參考一下這些教程，一定學(xué)一下，保證你可以在 5 分鐘內(nèi)掌握常用的語法格式，而以后對(duì)你寫作受用無窮。可謂充電 5 分鐘，通話 2 小時(shí)。以下是我學(xué)習(xí)中的一些參考資料：

?Markdown——入門指南[2]

?Markdown 語法說明[3]

# 一級(jí)標(biāo)題## 二級(jí)標(biāo)題### 三級(jí)標(biāo)題- 列表項(xiàng)1- 列表項(xiàng)2- 列表項(xiàng)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})?```

如果你發(fā)現(xiàn)無法顯示代碼塊，即代碼無法換行，請(qǐng)檢查代碼塊的語法是否書寫有誤。代碼塊的語法如上邊的測試文本中最后一段所示。

你可能想在文章中插入圖片，目前能做的且推薦做的是使用外鏈引入圖片。比如將圖片上傳到七牛云這樣的云存儲(chǔ)服務(wù)器，然后通過 Markdown 的圖片語法將圖片引入。Markdown 引入圖片的語法為：。

safe 標(biāo)簽

我們?cè)诎l(fā)布的文章詳情頁沒有看到預(yù)期的效果，而是類似于一堆亂碼一樣的 HTML 標(biāo)簽，這些標(biāo)簽本應(yīng)該在瀏覽器顯示它自身的格式，但是 django 出于安全方面的考慮，任何的 HTML 代碼在 django 的模板中都會(huì)被轉(zhuǎn)義(即顯示原始的 HTML 代碼，而不是經(jīng)瀏覽器渲染后的格式)。為了解除轉(zhuǎn)義，只需在模板變量后使用 safe 過濾器即可，告訴 django，這段文本是安全的，你什么也不用做。在模板中找到展示博客文章內(nèi)容的 {{ post.body }} 部分，為其加上 safe 過濾器：{{ post.body|safe }}，大功告成，這下看到預(yù)期效果了。

safe 是 django 模板系統(tǒng)中的過濾器(Filter)，可以簡單地把它看成是一種函數(shù)，其作用是作用于模板變量，將模板變量的值變?yōu)榻?jīng)過濾器處理過后的值。例如這里 {{ post.body|safe }}，本來 {{ post.body }}經(jīng)模板系統(tǒng)渲染后應(yīng)該顯示 body 本身的值，但是在后面加上 safe 過濾器后，渲染的值不再是 body 本身的值，而是由 safe 函數(shù)處理后返回的值。過濾器的用法是在模板變量后加一個(gè) | 管道符號(hào)，再加上過濾器的名稱。可以連續(xù)使用多個(gè)過濾器，例如 {{ var|filter1|filter2 }}。

代碼高亮

程序員寫博客免不了要插入一些代碼，Markdown 的語法使我們?nèi)菀椎貢鴮懘a塊，但是目前來說，顯示的代碼塊里的代碼沒有任何顏色，很不美觀，也難以閱讀，要是能夠像代碼編輯器里一樣讓代碼高亮就好了。

代碼高亮我們借助 js 插件來實(shí)現(xiàn)，其原理就是 js 解析整個(gè) html 頁面，然后找到代碼塊元素，為代碼塊中的元素添加樣式。我們使用的插件叫做 highlight.js 和 highlightjs-line-numbers.js，前者提供基礎(chǔ)的代碼高亮，后者為代碼塊添加行號(hào)。

首先在 base.html 的 head 標(biāo)簽里引入代碼高亮的樣式，有多種樣式供你選擇，這里我們選擇 GitHub 主題的樣式。樣式文件直接通過 CDN 引入，同時(shí)在 style 標(biāo)簽里自定義了一點(diǎn)元素樣式，使得代碼塊的顯示效果更加完美。

...

然后是引入 js 文件，因?yàn)閼?yīng)該等整個(gè)頁面加載完，插件再去解析代碼塊，所以把 js 文件的引入放在 body 底部：

非常簡單，通過 CDN 引入 highlight.js 和 highlightjs-line-numbers.js，然后初始化了兩個(gè)插件。再來看下效果，非常完美！

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/

歡迎關(guān)注 HelloGitHub 公眾號(hào)，獲取更多開源項(xiàng)目的資料和內(nèi)容

『講解開源項(xiàng)目系列』啟動(dòng)——讓對(duì)開源項(xiàng)目感興趣的人不再畏懼、讓開源項(xiàng)目的發(fā)起者不再孤單。跟著我們的文章，你會(huì)發(fā)現(xiàn)編程的樂趣、使用和發(fā)現(xiàn)參與開源項(xiàng)目如此簡單。歡迎聯(lián)系我們給我們投稿，讓更多人愛上開源、貢獻(xiàn)開源～

總結(jié)

以上是生活随笔為你收集整理的activiti高亮显示图片_第 09 篇：让博客支持 Markdown 语法和代码高亮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。