Django搭建個(gè)人博客：使用Markdown語(yǔ)法書寫文章

2020.04.29

上一章我們實(shí)現(xiàn)了文章詳情頁(yè)面。為了讓文章正文能夠進(jìn)行標(biāo)題、加粗、引用、代碼塊等不同的排版（像在Office中那樣?。?，我們將使用Markdown語(yǔ)法。

安裝Markdown

Markdown是一種輕量級(jí)的標(biāo)記語(yǔ)言，它允許人們“使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的或者HTML文檔。建議讀者一定要花五分鐘時(shí)間熟悉一下Markdown的語(yǔ)法，熟練后碼字效率一定會(huì)大幅提高。

關(guān)于Markdown語(yǔ)法看這里：Markdown 語(yǔ)法介紹

安裝markdown也很簡(jiǎn)單：進(jìn)入虛擬環(huán)境，輸入指令pip install markdown即可。

使用Markdown

為了將Markdown語(yǔ)法書寫的文章渲染為HTML文本，首先改寫article/views.py的article_detail()：

article/views.py...# 引入markdown模塊import markdowndef article_detail(request, id):    article = ArticlePost.objects.get(id=id)    # 將markdown語(yǔ)法渲染成html樣式    article.body = markdown.markdown(article.body,        extensions=[        # 包含 縮寫、表格等常用擴(kuò)展        'markdown.extensions.extra',        # 語(yǔ)法高亮擴(kuò)展        'markdown.extensions.codehilite',        ])    context = { 'article': article }    return render(request, 'article/detail.html', context)

代碼中markdown.markdown語(yǔ)法接收兩個(gè)參數(shù)：第一個(gè)參數(shù)是需要渲染的文章正文article.body；第二個(gè)參數(shù)載入了常用的語(yǔ)法擴(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語(yǔ)法配置好了。

啟動(dòng)服務(wù)器，在后臺(tái)中新錄入一條用markdown語(yǔ)法書寫的文章，內(nèi)容如下：

# 國(guó)風(fēng)·周南·關(guān)雎---**關(guān)關(guān)雎鳩，在河之洲。窈窕淑女，君子好逑。**參差荇菜，左右流之。窈窕淑女，寤寐求之。---+ 列表一+ 列表二    + 列表二-1    + 列表二-2---?```pythondef article_detail(request, id):	article = ArticlePost.objects.get(id=id)	# 將markdown語(yǔ)法渲染成html樣式	article.body = markdown.markdown(article.body,		extensions=[		# 包含 縮寫、表格等常用擴(kuò)展		'markdown.extensions.extra',		# 語(yǔ)法高亮擴(kuò)展		'markdown.extensions.codehilite',		])	context = { 'article': article }	return render(request, 'article/detail.html', context)?```

返回文章詳情，結(jié)果如下：

很好，但是代碼塊還是不怎么好看。

寫技術(shù)文章沒有代碼高亮怎么行。繼續(xù)努力。

代碼高亮

在static目錄中新建一個(gè)目錄md_css/，一會(huì)兒放置代碼高亮的樣式文件。

重新打開一個(gè)命令行窗口，進(jìn)入虛擬環(huán)境，安裝Pygments：pip install Pygments

Pygments是一種通用語(yǔ)法高亮顯示器，可以幫助我們自動(dòng)生成美化代碼塊的樣式文件。

在命令行中進(jìn)入剛才新建的md_css目錄中，輸入Pygments指令：

pygmentize -S monokai -f html -a .codehilite > monokai.css

這里有一點(diǎn)需要注意, 生成命令中的 -a 參數(shù)需要與真實(shí)頁(yè)面中的 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ù)器，順利的話看到如下：