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