Python 輕松實現(xiàn) markdown 轉(zhuǎn)網(wǎng)頁應(yīng)用，完美支持 mermaid 圖表

作者：費弗里 2025-06-19 08:10:00

今天的文章中，我們就來一起學(xué)習(xí)如何基于 Python 輕松實現(xiàn) markdown 轉(zhuǎn)網(wǎng)頁應(yīng)用。

大家好我是費老師，markdown作為經(jīng)典易用的文檔格式，隨著近幾年AI大模型的普及，更是成為了大模型內(nèi)容輸出的標(biāo)準(zhǔn)內(nèi)容格式。

針對markdown格式的內(nèi)容，使用Python中的一些寶藏庫，我們可以將其輕松轉(zhuǎn)化為可訪問的應(yīng)用頁面，并且對markdown中嵌入的latex公式、HTML代碼塊，以及目前非常流行的內(nèi)嵌mermaid圖表等形式豐富的內(nèi)容，都可以完美的渲染展示出來，非常適合自建文檔、知識庫等應(yīng)用場景。

今天的文章中，我們就來一起學(xué)習(xí)如何基于Python輕松實現(xiàn)markdown轉(zhuǎn)網(wǎng)頁應(yīng)用??~

Python輕松實現(xiàn)markdown轉(zhuǎn)網(wǎng)頁應(yīng)用

我們使用Python中的fmc庫實現(xiàn)markdown到網(wǎng)頁應(yīng)用的直接轉(zhuǎn)換：

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)中著名的全棧應(yīng)用框架Dash，因此下面的示例中，我們通過將fmc的markdown渲染組件放置在應(yīng)用的頁面內(nèi)容中，便可實現(xiàn)渲染。

(1) app1.py

import dash
import feffery_markdown_components as fmc

app = dash.Dash(__name__)

raw_markdown = """
# 1 示例一級標(biāo)題

## 1.1 示例二級標(biāo)題

這是一段*示例內(nèi)容*。
"""

app.layout = fmc.FefferyMarkdown(markdownStr=raw_markdown)

if __name__ == "__main__":
    app.run(debug=True)

終端執(zhí)行python app1.py，按照輸出的地址瀏覽器訪問即可，可以看到對應(yīng)的markdown內(nèi)容被正確渲染：

除了常規(guī)的markdown內(nèi)容以外，基于fmc我們還可以渲染內(nèi)嵌的mermaid圖表，以通過deepseek生成的大模型綜述內(nèi)容為例：

對應(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圖表渲染功能時，需在應(yīng)用實例化時額外引入必要的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等提出自注意力機制
        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[核心技術(shù)] --> B[架構(gòu)創(chuàng)新]
    A --> C[規(guī)模擴展]
    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ù)分布
    "百億級" : 35
    "千億級" : 55
    "萬億級" : 10
```

關(guān)鍵發(fā)展特征：
1. 模型規(guī)模指數(shù)增長（2018-2023年參數(shù)增長1000倍）
2. 訓(xùn)練范式轉(zhuǎn)變：從監(jiān)督學(xué)習(xí)到自監(jiān)督/強化學(xué)習(xí)
3. 應(yīng)用場景擴展：單模態(tài)→多模態(tài)→智能體系統(tǒng)
4. 技術(shù)挑戰(zhàn)：推理成本、幻覺問題、安全對齊

注：可根據(jù)需要調(diào)整時間節(jié)點或技術(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á)圖為例：