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

大家好，欢迎来到IT知识分享网。

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中新引入的特殊图表类型，以雷达图为例：

除了上面展示的部分示例以外，通过fmc渲染markdown支持但不限于的功能有（以下示例均来自fmc在线文档：https://fmc.feffery.tech ）：

• 内置多种代码块主题

• Latex公式渲染

• 渲染原生HTML

• 自定义代码块样式

• 渲染图片内容

• 各类型元素样式可自定义

• 内置多种主题

• 自动目录生成

• 关键词高亮功能

基于fmc以及Dash应用生态中的其他组件库，我们可以纯Python轻松定制化实现各种文档、知识库类应用。