ARTICLE · 1062312
用 Python 把 Markdown文档一键变成html网页,目录还能点击跳转?看完轻松搞定了
摘要：Markdown 转 HTML 很简单，但目录不能跳转、样式靠默认，转发出去就是"毛坯房"。这个 Python 脚本用 markdown 库 + toc 扩展，一键生成带目录、可点击跳转的静态网页，还带基础 CSS 排版。
📝 先说说我们都在经历的"真香"过程
相信很多人在某个瞬间都干过这事：写文章用 Markdown，写技术笔记用 Markdown，连 README 都离不开 Markdown。
它轻、它快、它纯文本——但有一天你把 .md 文件发给别人的时候，对方回你一句：
"这啥玩意？纯文本？能不能给我个网页版？"
于是"把 Markdown 变成网页"就成了绕不开的需求。
市面上的方案很多：在线编辑器、博客平台、NPM 全家桶……但对很多人来说最顺手的是——写个 Python 脚本，几行把 .md 一键吐成 .html，纯本地、零依赖、随用随走。
🧩 一个真实踩坑：目录做好了，却点不动
在
《Markdown 变网页最省事的一招：后端一把梭，直接吐 HTML 文件》
Elixir，公众号：Code自习室Markdown 变网页最省事的一招：后端一把梭，直接吐 HTML 文件
介绍了使用python将md语法文本转换为html静态文件的方式，
如果你的 Markdown 只是简单语法（标题、表格、代码块），基础转换毫无问题。
但当你把 Markdown 升级成"长篇、带目录"的文档时，坑就来了：
生成的 HTML 里，目录是显示了，但点击目录项，页面纹丝不动。
因为默认的 markdown.markdown() 转出来的 HTML，标题上没有 id 锚点——目录列出来了，但没有可跳转的"目的地"。这就是"看起来有目录，实际点不动"的根源。
✅ 修复思路：一行 toc 扩展就能解决
Python 的 markdown 库自带一个 toc 扩展，专门干这件事：
自动给每个标题生成
id锚点（如id="qi-shi-shi-she-me"）自动生成一份目录 HTML，可直接插入页面
目录项自带指向锚点的链接，点击即可跳转
加一个扩展、取一个属性，搞定：
md = markdown.Markdown(extensions=['tables', 'fenced_code', 'toc'])html_body = md.convert(md_content) # 正文（标题已带 id）toc_html = md.toc # 自动生成的目录 HTML
然后把 toc_html 和 html_body 都放进页面模板里，目录能跳、正文能看。
🎁 不止修复，这个脚本还挺"好用"
修复过程中，这个脚本顺便把"成品网页"也武装齐了，几个亮点：
1. 一键生成，纯本地离线python md_to_html.py，指定输入输出文件，一条命令完事。不联网、不上传、不改 Markdown 源文件，隐私友好。
2. 自动带目录（TOC）+ 可跳转长文档的救命功能：目录自动生成、自动锚定，读者定位内容拖一下就行。
3. 内置基础样式，开箱即看脚本自带一份 CSS：微软雅黑正文、标题配色、圆角代码块、边框表格、引用样式、图片自适——比"大白板"顺眼太多，转发出去是"精装房"。
4. 支持表格 / 代码块等常用语法tables、fenced_code 两个扩展让 Markdown 里的表格、围栏代码块在网页里正常呈现，技术文档场景完全够用。
5. 复用简单，可当"流水线零件"函数封装成 md_to_html(md_file, html_file)，可以批量循环转多个文件、接进文档发布流程、或做本地知识库展示。
🧪 效果长什么样
把一篇带目录、有表格、有代码块的长 Markdown 传进去，出来的 HTML 大概是这样的观感：
顶部一段可点击的目录，点一下"嗖"地跳过去
标题带层级配色，正文行距舒适
表格有边框、代码块有底色圆角、图片不超出屏幕
🎯 适合谁用
技术博主 / 文档作者：写好 Markdown，脚本一跑，导出可分享网页
团队知识库：把散落的
.md笔记统一转成网页，内部发布离线环境用户：内网、无工具链的场景，本地脚本最稳
极简主义者：不想为"转个网页"引入博客框架 / npm 生态
一句话：给你一份"写完 Markdown 顺手点一下"的能力，让分享不再甩个 .md 纯文本过去。
📮 领取完整代码
文中给出的是核心思路。完整可运行的 md_to_html.py（含修复前 / 修复后两版完整代码、以及可直接套用秒的 CSS 模板），整理好了随时可取。
📩 关注公众号，后台回复「md转html」，获取完整示例代码文档。
