作者：HelloGitHub-追夢人物

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

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

安裝 Python Markdown

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

在 detail 視圖中解析 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 標簽里自定義了一點元素樣式，使得代碼塊的顯示效果更加完美。

...

然后是引入 js 文件，因為應該等整個頁面加載完，插件再去解析代碼塊，所以把 js 文件的引入放在 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 公眾號，獲取更多開源項目的資料和內容

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。