上一章我們實(shí)現(xiàn)了文章詳情頁面。為了讓文章正文能夠進(jìn)行標(biāo)題、加粗、引用、代碼塊等不同的排版（像在Office中那樣?。?，我們將使用Markdown語法。
安裝Markdown
Markdown是一種輕量級(jí)的標(biāo)記語言，它允許人們“使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的或者HTML文檔。建議讀者一定要花五分鐘時(shí)間熟悉一下Markdown的語法，熟練后碼字效率一定會(huì)大幅提高。
關(guān)于Markdown語法看這里：Markdown 語法介紹
安裝markdown也很簡(jiǎn)單：進(jìn)入虛擬環(huán)境，輸入指令pip install markdown即可。
使用Markdown
為了將Markdown語法書寫的文章渲染為HTML文本，首先改寫article/views.py的article_detail()：
article/views.py
...
# 引入markdown模塊
import markdown
def article_detail(request, id):
article = ArticlePost.objects.get(id=id)
# 將markdown語法渲染成html樣式
article.body = markdown.markdown(article.body,
extensions=[
# 包含 縮寫、表格等常用擴(kuò)展
'markdown.extensions.extra',
# 語法高亮擴(kuò)展
'markdown.extensions.codehilite',
])
context = { 'article': article }
return render(request, 'article/detail.html', context)
代碼中markdown.markdown語法接收兩個(gè)參數(shù)：第一個(gè)參數(shù)是需要渲染的文章正文article.body；第二個(gè)參數(shù)載入了常用的語法擴(kuò)展，markdown.extensions.extra中包括了縮寫、表格等擴(kuò)展，markdown.extensions.codehilite則是后面要使用的代碼高亮擴(kuò)展。
然后，修改templates/article/detail.html中有關(guān)文章正文的部分：
templates/article/detail.html
...
# 在 article.body 后加上 |safe 過濾器
<p>{{ article.body|safe }}</p>
Django出于安全的考慮，會(huì)將輸出的HTML代碼進(jìn)行轉(zhuǎn)義，這使得article.body中渲染的HTML文本無法正常顯示。管道符|是Django中過濾器的寫法，而|safe就類似給article.body貼了一個(gè)標(biāo)簽，表示這一段字符不需要進(jìn)行轉(zhuǎn)義了。
這樣就把Markdown語法配置好了。
啟動(dòng)服務(wù)器，在后臺(tái)中新錄入一條用markdown語法書寫的文章，內(nèi)容如下：
# 國風(fēng)·周南·關(guān)雎
---
**關(guān)關(guān)雎鳩，在河之洲。窈窕淑女，君子好逑。**
參差荇菜，左右流之。窈窕淑女，寤寐求之。
---
+ 列表一
+ 列表二
+ 列表二-1
+ 列表二-2
---
?```python
def article_detail(request, id):
article = ArticlePost.objects.get(id=id)
# 將markdown語法渲染成html樣式
article.body = markdown.markdown(article.body,
extensions=[
# 包含 縮寫、表格等常用擴(kuò)展
'markdown.extensions.extra',
# 語法高亮擴(kuò)展
'markdown.extensions.codehilite',
])
context = { 'article': article }
return render(request, 'article/detail.html', context)
?```
返回文章詳情，結(jié)果如下：
[圖片上傳失敗...(image-3e820f-1537878395887)]
很好，但是代碼塊還是不怎么好看。
寫技術(shù)文章沒有代碼高亮怎么行。繼續(xù)努力。
代碼高亮
在static目錄中新建一個(gè)目錄md_css/，一會(huì)兒放置代碼高亮的樣式文件。
重新打開一個(gè)命令行窗口，進(jìn)入虛擬環(huán)境，安裝Pygments：pip install Pygments
Pygments是一種通用語法高亮顯示器，可以幫助我們自動(dòng)生成美化代碼塊的樣式文件。
在命令行中進(jìn)入剛才新建的md_css目錄中，輸入Pygments指令：
pygmentize -S monokai -f html -a .codehilite > monokai.css
這里有一點(diǎn)需要注意, 生成命令中的 -a 參數(shù)需要與真實(shí)頁面中的 CSS Selector 相對(duì)應(yīng)，即.codehilite這個(gè)字段在有些版本中應(yīng)寫為.highlight。如果后面的代碼高亮無效，很可能是這里出了問題。
回車后檢查一下，在md_css目錄中是否自動(dòng)生成了一個(gè)叫monokai.css的文件，這是一個(gè)深色背景的高亮樣式文件。
接下來我們?cè)?code>base.html中引用這個(gè)文件：
templates/base.html
<head>
...
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<!-- 引入monikai.css -->
<link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
</head>
...
重新啟動(dòng)服務(wù)器，順利的話看到如下：
除了Monokai這個(gè)深色的樣式外，Pygments還內(nèi)置了很多其他的樣式，這個(gè)就看喜好選擇了。
各種不同樣式可以在這里參照：pygments-css
總結(jié)
本章引進(jìn)了Markdown語法以及代碼高亮擴(kuò)展，從此可以寫排版漂亮的文章正文了。
下一章將學(xué)習(xí)如何創(chuàng)建一篇新的文章。
- 有疑問請(qǐng)?jiān)?a target="_blank" rel="nofollow">杜賽的個(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。
- 或Email私信我：dusaiphoto@foxmail.com
- 項(xiàng)目完整代碼：Django_blog_tutorial
轉(zhuǎn)載請(qǐng)告知作者并注明出處。
