Python 輕松實(shí)現(xiàn) markdown 轉(zhuǎn)網(wǎng)頁應(yīng)用，完美支持 mermaid 圖表
大家好我是費(fèi)老師，markdown作為經(jīng)典易用的文檔格式，隨著近幾年AI大模型的普及，更是成為了大模型內(nèi)容輸出的標(biāo)準(zhǔn)內(nèi)容格式。
針對(duì)markdown格式的內(nèi)容，使用Python中的一些寶藏庫，我們可以將其輕松轉(zhuǎn)化為可訪問的應(yīng)用頁面，并且對(duì)markdown中嵌入的latex公式、HTML代碼塊，以及目前非常流行的內(nèi)嵌mermaid圖表等形式豐富的內(nèi)容，都可以完美的渲染展示出來，非常適合自建文檔、知識(shí)庫等應(yīng)用場景。
今天的文章中，我們就來一起學(xué)習(xí)如何基于Python輕松實(shí)現(xiàn)markdown轉(zhuǎn)網(wǎng)頁應(yīng)用??~
Python輕松實(shí)現(xiàn)markdown轉(zhuǎn)網(wǎng)頁應(yīng)用
我們使用Python中的fmc庫實(shí)現(xiàn)markdown到網(wǎng)頁應(yīng)用的直接轉(zhuǎn)換：
fmc在線文檔地址：https://fmc.feffery.tech
在已激活Python環(huán)境的前提下（推薦Python版本在3.8到3.12之間），終端執(zhí)行下列命令完成對(duì)fmc庫最新正式版本的安裝：
pip install feffery-markdown-components -U下面我們先通過一個(gè)最簡單的例子，了解基于fmc渲染markdown的基本方法，fmc依托于Python生態(tài)中著名的全棧應(yīng)用框架Dash，因此下面的示例中，我們通過將fmc的markdown渲染組件放置在應(yīng)用的頁面內(nèi)容中，便可實(shí)現(xiàn)渲染。
(1) app1.py
import dash
import feffery_markdown_components as fmc
app = dash.Dash(__name__)
raw_markdown = """
# 1 示例一級(jí)標(biāo)題
## 1.1 示例二級(jí)標(biāo)題
這是一段*示例內(nèi)容*。
"""
app.layout = fmc.FefferyMarkdown(markdownStr=raw_markdown)
if __name__ == "__main__":
app.run(debug=True)終端執(zhí)行python app1.py，按照輸出的地址瀏覽器訪問即可，可以看到對(duì)應(yīng)的markdown內(nèi)容被正確渲染：
除了常規(guī)的markdown內(nèi)容以外，基于fmc我們還可以渲染內(nèi)嵌的mermaid圖表，以通過deepseek生成的大模型綜述內(nèi)容為例：
對(duì)應(yīng)代碼如下，具體設(shè)置參考fmc相關(guān)在線文檔（ https://fmc.feffery.tech/render-mermaid ）：
(2) app2.py
import dash
import feffery_markdown_components as fmc
app = dash.Dash(
__name__,
# 使用mermaid圖表渲染功能時(shí)，需在應(yīng)用實(shí)例化時(shí)額外引入必要的mermaid靜態(tài)資源，譬如下面示例的CDN地址
external_scripts=[
"https://registry.npmmirror.com/mermaid/latest/files/dist/mermaid.min.js"
],
)
raw_markdown = """
以下是簡潔的大模型發(fā)展綜述的Mermaid圖表表示：
```mermaid
timeline
title 大模型發(fā)展史
section 萌芽期 (2017-2018)
Transformer架構(gòu)提出 : 2017: Vaswani等提出自注意力機(jī)制
GPT-1誕生 : 2018: OpenAI發(fā)布1.17億參數(shù)模型
section 快速發(fā)展期 (2019-2020)
BERT崛起 : 2019: Google提出雙向Transformer
GPT-3突破 : 2020: 1750億參數(shù)模型問世
section 多模態(tài)時(shí)代 (2021-2022)
CLIP模型 : 2021: 圖文跨模態(tài)理解
ChatGPT發(fā)布 : 2022: 對(duì)話能力突破
section 生態(tài)競爭期 (2023-)
開源模型爆發(fā) : LLaMA/PaLM等競品
多模態(tài)大模型 : GPT-4V/Gemini
```
```mermaid
graph TD
A[核心技術(shù)] --> B[架構(gòu)創(chuàng)新]
A --> C[規(guī)模擴(kuò)展]
A --> D[訓(xùn)練方法]
B --> B1[Transformer]
B --> B2[Moe結(jié)構(gòu)]
C --> C1[千億參數(shù)]
C --> C2[分布式訓(xùn)練]
D --> D1[RLHF]
D --> D2[提示工程]
```
```mermaid
pie
title 2023年模型參數(shù)分布
"百億級(jí)" : 35
"千億級(jí)" : 55
"萬億級(jí)" : 10
```
關(guān)鍵發(fā)展特征：
1. 模型規(guī)模指數(shù)增長（2018-2023年參數(shù)增長1000倍）
2. 訓(xùn)練范式轉(zhuǎn)變：從監(jiān)督學(xué)習(xí)到自監(jiān)督/強(qiáng)化學(xué)習(xí)
3. 應(yīng)用場景擴(kuò)展：單模態(tài)→多模態(tài)→智能體系統(tǒng)
4. 技術(shù)挑戰(zhàn)：推理成本、幻覺問題、安全對(duì)齊
注：可根據(jù)需要調(diào)整時(shí)間節(jié)點(diǎn)或技術(shù)分類，此圖表突出關(guān)鍵里程碑和技術(shù)維度。
"""
app.layout = fmc.FefferyMarkdown(markdownStr=raw_markdown, mermaidOptinotallow=True)
if __name__ == "__main__":
app.run(debug=True)在fmc中渲染markdown內(nèi)嵌的mermaid圖表，可以自由指定依賴的mermaid資源版本，使得相關(guān)功能非常靈活且穩(wěn)定，譬如可以完美渲染mermaid中新引入的特殊圖表類型，以雷達(dá)圖為例：
除了上面展示的部分示例以外，通過fmc渲染markdown支持但不限于的功能有（以下示例均來自fmc在線文檔：https://fmc.feffery.tech ）：
內(nèi)置多種代碼塊主題
Latex公式渲染
渲染原生HTML
自定義代碼塊樣式
渲染圖片內(nèi)容
各類型元素樣式可自定義
內(nèi)置多種主題
自動(dòng)目錄生成
關(guān)鍵詞高亮功能
基于fmc以及Dash應(yīng)用生態(tài)中的其他組件庫，我們可以純Python輕松定制化實(shí)現(xiàn)各種文檔、知識(shí)庫類應(yīng)用??。
