|
上一章我們實現(xiàn)了文章詳情頁面。為了讓文章正文能夠進行標題、加粗、引用、代碼塊等不同的排版（像在Office中那樣?。?，我們將使用Markdown語法。
安裝Markdown
Markdown是一種輕量級的標記語言，它允許人們“使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的或者HTML文檔。建議讀者一定要花五分鐘時間熟悉一下Markdown的語法，熟練后碼字效率一定會大幅提高。
關(guān)于Markdown語法看這里：Markdown 語法介紹
安裝markdown也很簡單：進入虛擬環(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=[
# 包含 縮寫、表格等常用擴展
'markdown.extensions.extra',
# 語法高亮擴展
'markdown.extensions.codehilite',
])
context = { 'article': article }
return render(request, 'article/detail.html', context)
代碼中markdown.markdown語法接收兩個參數(shù)：第一個參數(shù)是需要渲染的文章正文article.body；第二個參數(shù)載入了常用的語法擴展，markdown.extensions.extra中包括了縮寫、表格等擴展，markdown.extensions.codehilite則是后面要使用的代碼高亮擴展。
然后，修改templates/article/detail.html中有關(guān)文章正文的部分：
templates/article/detail.html
...
# 在 article.body 后加上 |safe 過濾器
<p>{{ article.body|safe }}</p>
Django出于安全的考慮，會將輸出的HTML代碼進行轉(zhuǎn)義，**這使得article.body中渲染的HTML文本無法正常顯示。**管道符|是Django中過濾器的寫法，而|safe就類似給article.body貼了一個標簽，表示這一段字符不需要進行轉(zhuǎn)義了。
這樣就把Markdown語法配置好了。
啟動服務(wù)器，在后臺中新錄入一條用markdown語法書寫的文章，內(nèi)容如下：
# 國風·周南·關(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=[
# 包含 縮寫、表格等常用擴展
'markdown.extensions.extra',
# 語法高亮擴展
'markdown.extensions.codehilite',
])
context = { 'article': article }
return render(request, 'article/detail.html', context)
?```
返回文章詳情，結(jié)果如下：
很好，但是代碼塊還是不怎么好看。
寫技術(shù)文章沒有代碼高亮怎么行。繼續(xù)努力。
代碼高亮
在static目錄中新建一個目錄md_css/，一會兒放置代碼高亮的樣式文件。
重新打開一個命令行窗口，進入虛擬環(huán)境，安裝Pygments：pip install Pygments
Pygments是一種通用語法高亮顯示器，可以幫助我們自動生成美化代碼塊的樣式文件。
在命令行中進入剛才新建的md_css目錄中，輸入Pygments指令：
pygmentize -S monokai -f html -a .codehilite > monokai.css
這里有一點需要注意, 生成命令中的 -a 參數(shù)需要與真實頁面中的 CSS Selector 相對應，即.codehilite這個字段在有些版本中應寫為.highlight。如果后面的代碼高亮無效，很可能是這里出了問題。
回車后檢查一下，在md_css目錄中是否自動生成了一個叫monokai.css的文件，這是一個深色背景的高亮樣式文件。
接下來我們在base.html中引用這個文件：
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>
...
重新啟動服務(wù)器，順利的話看到如下：
除了Monokai這個深色的樣式外，Pygments還內(nèi)置了很多其他的樣式，這個就看喜好選擇了。
各種不同樣式可以在這里參照：pygments-css
總結(jié)
本章引進了Markdown語法以及代碼高亮擴展，從此可以寫排版漂亮的文章正文了。
下一章將學習如何創(chuàng)建一篇新的文章。
轉(zhuǎn)載請告知作者并注明出處。
|
