Django搭建我的博客：使用Markdown語法書寫文章

時間 2019-11-21

標籤 django 搭建我的博客使用 markdown 語法書寫文章欄目 Python 简体版

原文原文鏈接

上一章咱們實現了文章詳情頁面。爲了讓文章正文可以進行標題、加粗、引用、代碼塊等不一樣的排版（像在Office中那樣！），咱們將使用Markdown語法。css

安裝Markdown

Markdown是一種輕量級的標記語言，它容許人們「使用易讀易寫的純文本格式編寫文檔，而後轉換成有效的或者HTML文檔。建議讀者必定要花五分鐘時間熟悉一下Markdown的語法，熟練後碼字效率必定會大幅提升。html

關於Markdown語法看這裏：Markdown 語法介紹python

安裝markdown也很簡單：進入虛擬環境，輸入指令pip install markdown便可。git

使用Markdown

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

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語法接收兩個參數：第一個參數是須要渲染的文章正文article.body；第二個參數載入了經常使用的語法擴展，markdown.extensions.extra中包括了縮寫、表格等擴展，markdown.extensions.codehilite則是後面要使用的代碼高亮擴展。django

而後，修改templates/article/detail.html中有關文章正文的部分：bootstrap

templates/article/detail.html

...

# 在 article.body 後加上 |safe 過濾器
<p>{{ article.body|safe }}</p>

Django出於安全的考慮，會將輸出的HTML代碼進行轉義，這使得article.body中渲染的HTML文本沒法正常顯示。管道符|是Django中過濾器的寫法，而|safe就相似給article.body貼了一個標籤，表示這一段字符不須要進行轉義了。安全

這樣就把Markdown語法配置好了。bash

啓動服務器，在後臺中新錄入一條用markdown語法書寫的文章，內容以下：服務器

# 國風·周南·關雎
---
**關關雎鳩，在河之洲。窈窕淑女，君子好逑。**

參差荇菜，左右流之。窈窕淑女，寤寐求之。

---
+ 列表一
+ 列表二
    + 列表二-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)
```

返回文章詳情，結果以下：

很好，可是代碼塊仍是不怎麼好看。

寫技術文章沒有代碼高亮怎麼行。繼續努力。

代碼高亮

在static目錄中新建一個目錄md_css/，一下子放置代碼高亮的樣式文件。

從新打開一個命令行窗口，進入虛擬環境，安裝Pygments：pip install Pygments

Pygments是一種通用語法高亮顯示器，能夠幫助咱們自動生成美化代碼塊的樣式文件。

在命令行中進入剛纔新建的md_css目錄中，輸入Pygments指令：

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

這裏有一點須要注意, 生成命令中的 -a 參數須要與真實頁面中的 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>
...

從新啓動服務器，順利的話看到以下：