實現Markdown 語法顯示

1. 安裝Markdown

• 進入虛擬環境使用 pip install markdown安裝

2. detail 檢視中渲染 Markdown

將markdown格式的文字渲染成html，只需要呼叫markdown庫的markdown方法就可以了。 以下示例，需要渲染的內容存在Article的body屬性中。

blog/views.py

import markdown
from django.shortcuts import render, get_object_or_404
from .models import Article

def detail(request, pk):
    article = get_object_or_404(Article, pk=pk)
    # 記得在頂部引入 markdown 模組
    article.body = markdown.markdown(article.body,extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',
        'markdown.extensions.toc',
    ])
    return render(request, 'blog/detail.html', context={'article': article})

 

markdown.extensions函式說明

• extra本身包含很多擴充套件
• codehilite是語法高亮
• toc是自動生成目錄

3. safe標籤

我們在釋出的文章詳情頁沒有看到預期的效果，而是類似於一堆亂碼一樣的 HTML 標籤，這些標籤本應該在瀏覽器顯示它本身的格式，但是 Django 出於安全方面的考慮，任何的 HTML 程式碼在 Django 的模板中都會被轉義（即顯示原始的 HTML 程式碼，而不是經瀏覽器渲染後的格式）。為了解除轉義，只需在模板標籤使用 safe 過濾器即可，告訴 Django，這段文字是安全的，你什麼也不用做。在模板中找到展示部落格文章主體的 {{ article.text }}

safe 是 Django 模板系統中的過濾器（Filter），可以簡單地把它看成是一種函式，其作用是作用於模板變數，將模板變數的值變為經過濾器處理過後的值。例如這裡 {{ article.text|safe }}，本來 {{article.text }} 經模板系統渲染後應該顯示 body 本身的值，但是在後面加上 safe 過濾器後，渲染的值不再是text 本身的值，而是由 safe 函式處理後返回的值。過濾器的用法是在模板變數後加一個 | 管道符號，再加上過濾器的名稱。可以連續使用多個過濾器，例如 {{ var|filter1|filter2 }} 我們在釋出的文章詳情頁沒有看到預期的效果，而是類似於一堆亂碼一樣的 HTML 標籤，這些標籤本應該在瀏覽器顯示它本身的格式，但是 Django 出於安全方面的考慮，任何的 HTML 程式碼在 Django 的模板中都會被轉義（即顯示原始的 HTML 程式碼，而不是經瀏覽器渲染後的格式）。為了解除轉義，只需在模板標籤使用 safe

safe 是 Django 模板系統中的過濾器（Filter），可以簡單地把它看成是一種函式，其作用是作用於模板變數，將模板變數的值變為經過濾器處理過後的值。例如這裡 {{ article.text|safe }}，本來 {{article.text }} 經模板系統渲染後應該顯示 body 本身的值，但是在後面加上 safe 過濾器後，渲染的值不再是text 本身的值，而是由 safe 函式處理後返回的值。過濾器的用法是在模板變數後加一個 | 管道符號，再加上過濾器的名稱。可以連續使用多個過濾器，例如 {{ var|filter1|filter2 }}

出現問題

1. 出現'No module named 'mdx_markwdown'報錯 出現這個錯誤請檢查你的單詞拼寫

程式碼高亮

1. 安裝 Pygments

• 進入虛擬環境使用 pip install markdown安裝

搞定了，雖然我們除了安裝了一下 Pygments 什麼也沒做，但 Markdown 使用 Pygments 在後臺為我們做了很多事。如果你開啟部落格詳情頁，找到一段程式碼段，在瀏覽器檢視這段程式碼段的 HTML 原始碼，可以發現 Pygments 的工作原理是把程式碼切分成一個個單詞，然後為這些單詞新增 css 樣式，不同的詞應用不同的樣式，這樣就實現了程式碼顏色的區分，即高亮了語法。為此，還差最後一步，引入一個樣式檔案來給這些被添加了樣式的單詞定義顏色。

2. 引入樣式檔案

建立一個程式碼高亮的CSS樣式（其中-S後面是風格樣式，預設樣式default是emacs，生成的檔名為styles.css）：

(env) $: pygmentize -S default -f html -a .codehilite > styles.css

會在當前目錄會產生一個styles.css 檔案，將styles.css檔案移到/static/css/ 目錄，並在detail.html 檔案head標籤中新增樣式

<link rel="stylesheet" href="{% static 'blogpost/css/styles.css' %}">

程式碼無法高亮

1. 確保在渲染文字時添加了 markdown.extensions.codehilite 拓展，詳情見上文。

2. 確保安裝了 Pygments。

3. 確保程式碼塊的 Markdown 語法正確，特別是指明該程式碼塊的語言型別，具體請參見上文中 Markdown 的語法示例。

4. 在瀏覽器端程式碼塊的原始碼，看程式碼是否被 pre 標籤包裹，並且程式碼的每一個單詞都被 span 標籤包裹，且有一個 class 屬性值。如果沒有，極有可能是前幾步中某個地方出了問題。

5. 確保用於程式碼高亮的樣式檔案被正確地引入，具體請參見上文中引入樣式檔案的講解。

6. 有些樣式檔案可能對程式碼高亮沒有作用，首先嚐試用 github.css 樣式檔案做測試。

7. 如果程式碼仍然不高亮，請在瀏覽器中檢查class是否跟引入文件一致。 如果不一致將引入檔案改成一樣的就可以了