Django搭建博客(九):爲博客添加代碼高亮顯示和 md文檔支持

一、用到的模塊

  • 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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章