Python轻松实现markdown转网页应用，完美支持mermaid图表、latex公式

派大星的数据屋

发布于 2025-06-21 11:04:22

30500

代码可运行

文章被收录于专栏：Python大数据分析Python大数据分析

运行总次数：0

代码可运行

1 简介

大家好我是费老师，markdown作为经典易用的文档格式，随着近几年AI大模型的普及，更是成为了大模型内容输出的标准内容格式。

针对markdown格式的内容，使用Python中的一些宝藏库，我们可以将其轻松转化为可访问的应用页面，并且对markdown中嵌入的latex公式、HTML代码块，以及目前非常流行的内嵌mermaid图表等形式丰富的内容，都可以完美的渲染展示出来，非常适合自建文档、知识库等应用场景。

今天的文章中，我们就来一起学习如何基于Python轻松实现markdown转网页应用😉~

2 Python轻松实现markdown转网页应用

我们使用Python中的fmc库实现markdown到网页应用的直接转换：

fmc在线文档地址：https://fmc.feffery.tech

在已激活Python环境的前提下（推荐Python版本在3.8到3.12之间），终端执行下列命令完成对fmc库最新正式版本的安装：

pip install feffery-markdown-components -U

下面我们先通过一个最简单的例子，了解基于fmc渲染markdown的基本方法，fmc依托于Python生态中著名的全栈应用框架Dash，因此下面的示例中，我们通过将fmc的markdown渲染组件放置在应用的页面内容中，便可实现渲染。

❝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)

终端执行python app1.py，按照输出的地址浏览器访问即可，可以看到对应的markdown内容被正确渲染：

除了常规的markdown内容以外，基于fmc我们还可以渲染内嵌的mermaid图表，以通过deepseek生成的大模型综述内容为例：

对应代码如下，具体设置参考fmc相关在线文档（ https://fmc.feffery.tech/render-mermaid ）：

❝app2.py ❞

import dash
import feffery_markdown_components as fmc

app = dash.Dash(
    __name__,
    # 使用mermaid图表渲染功能时，需在应用实例化时额外引入必要的mermaid静态资源，譬如下面示例的CDN地址
    external_scripts=[
        "https://registry.npmmirror.com/mermaid/latest/files/dist/mermaid.min.js"
    ],
)

raw_markdown = """
以下是简洁的大模型发展综述的Mermaid图表表示：

```mermaid
timeline
    title 大模型发展史
    section 萌芽期 (2017-2018)
        Transformer架构提出 : 2017: Vaswani等提出自注意力机制
        GPT-1诞生 : 2018: OpenAI发布1.17亿参数模型
    section 快速发展期 (2019-2020)
        BERT崛起 : 2019: Google提出双向Transformer
        GPT-3突破 : 2020: 1750亿参数模型问世
    section 多模态时代 (2021-2022)
        CLIP模型 : 2021: 图文跨模态理解
        ChatGPT发布 : 2022: 对话能力突破
    section 生态竞争期 (2023-)
        开源模型爆发 : LLaMA/PaLM等竞品
        多模态大模型 : GPT-4V/Gemini
```

```mermaid
graph TD
    A[核心技术] --> B[架构创新]
    A --> C[规模扩展]
    A --> D[训练方法]
    B --> B1[Transformer]
    B --> B2[Moe结构]
    C --> C1[千亿参数]
    C --> C2[分布式训练]
    D --> D1[RLHF]
    D --> D2[提示工程]
```

```mermaid
pie
    title 2023年模型参数分布
    "百亿级" : 35
    "千亿级" : 55
    "万亿级" : 10
```

关键发展特征：
1. 模型规模指数增长（2018-2023年参数增长1000倍）
2. 训练范式转变：从监督学习到自监督/强化学习
3. 应用场景扩展：单模态→多模态→智能体系统
4. 技术挑战：推理成本、幻觉问题、安全对齐

注：可根据需要调整时间节点或技术分类，此图表突出关键里程碑和技术维度。
"""

app.layout = fmc.FefferyMarkdown(markdownStr=raw_markdown, mermaidOptions=True)

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

在fmc中渲染markdown内嵌的mermaid图表，可以自由指定依赖的mermaid资源版本，使得相关功能非常灵活且稳定，譬如可以完美渲染mermaid中新引入的特殊图表类型，以雷达图为例：