一、用到的模組

• Markdown
• pygments
• re

安裝直接使用 pip 安裝最新版本即可

二、支援的 markdown格式

目前只支援 Typora編輯器所支援的 markdown格式。

特別需要注意的是：程式碼塊必須使用三個 '`' 符號包裹起來才能正確識別，語言標記可有可無，但是三個 '`' 必須單獨成行。

三、解析思路

先用正則將程式碼塊從文件中提取出來，再用 pygments對程式碼進行上色，並生成 html標籤。

再將生成的 html標籤插入到原來程式碼的位置，然後再用 markdown將處理之後的文件整個解析為 html文件即可。

四、遇到的問題

1、如何將上色後的程式碼放回原位

一開始我想直接使用佔位符替換原來的程式碼，然後再根據佔位符來將程式碼插入回原來的位置。

但是在仔細看過 re庫的使用後，我發現 re.sub() 方法是可以接受一個函式來返回需要替換的字串。

所以我們可以直接在函式裡將程式碼轉化成 html標籤並返回，這樣就可以將轉化後的 html標籤放到對應位置了。

2、如何顯示行號

pygments是可以自動生成帶行號的 html標籤的（只需要將 lineno設定為 True 即可）。

但是我發現 pygments生成的 html標籤其實是一個 1行 2列的表格，一列用來顯示行號，一列用來顯示程式碼。

然而這樣卻有一個問題，就是當一行程式碼太長時會自動換行，而且行號有時候不能和對應的行對齊。

解決辦法是：自定義一個 formatter來生成自定義的程式碼塊，這裡我用了兩個 ol標籤，一個用來包裹行號，另一個用來包裹程式碼標籤。

五、使用方法

我將程式碼封裝成了一個函式，這個函式接受一個 markdown文件的字串，返回 html字串。

返回的字串可以直接插入 html頁面中（Django中記得使用 safe過濾器）。

使用方法如下：

#此處引入封裝好的函式，假設在同級目錄下
from .markdown_to_html import md_to_html

md_str = '這是一段 md字串'

html_str = md_to_html(md_str)

 

程式碼請看 ：markdown_to_html.py

生成 html程式碼所需的樣式檔案：style.css

專案地址：myblog

線上 demo：Test Markdown