Markdown to HTML

将 Markdown 文件转换为精美的 HTML 网页，支持代码语法高亮、自动暗黑模式、响应式设计。

快速开始

基本用法

# 转换单个 Markdown 文件
python scripts/md2html.py input.md

# 指定输出文件
python scripts/md2html.py input.md -o output.html

# 自定义页面标题
python scripts/md2html.py input.md -t "我的文档"

功能特性

• ✅ 代码语法高亮 - 支持 bash、python、javascript、json、html、css
• ✅ 完整的 Markdown 语法支持（标题、列表、链接、图片、代码块等）
• ✅ 自动暗黑/亮色模式切换（跟随系统设置）
• ✅ 响应式设计，适配移动端
• ✅ 代码块语言标签显示
• ✅ 表格支持
• ✅ 无需额外依赖（内置备用转换器）
• ✅ 支持 Python-markdown 扩展（如果已安装）

支持的 Markdown 语法

基础语法

• # 标题 - 六级标题
• 粗体 / 斜体 / ~~删除线~~
• ` 行内代码 `
• 链接文本 / !图片描述
• > 引用文本
• --- 水平线

列表

- 无序列表项
- 另一个项
  - 嵌套项

1. 有序列表项
2. 第二个项

代码块（带语法高亮）

def hello():

print("Hello, World!")

npx wechat-article-extractor https://mp.weixin.qq.com/s/xxx

const greeting = "Hello";

console.log(greeting);

表格

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| A   | B   | C   |
| D   | E   | F   |

语法高亮支持

支持的语言

高亮颜色

亮色模式：

• 关键字（粉/红色）- def, import, const 等
• 字符串（深蓝色）- "text", 'text'
• 注释（灰色）- # comment, // comment
• 数字（蓝色）- 123, 3.14
• 函数（紫色）- 函数名
• 类名（绿色）- 类定义

暗黑模式：

• 自动切换为更柔和的配色，保护眼睛

设计特点

代码展示优化

• 字体：使用 JetBrains Mono / Fira Code 等专业编程字体
• 语言标签：代码块顶部显示语言类型
• 圆角边框：现代化的视觉设计
• 横向滚动：长代码自动支持横向滚动

自动主题切换

生成的 HTML 页面会自动检测用户的系统主题偏好：

• 亮色模式：白色背景，深色文字
• 暗黑模式：深色背景（GitHub 风格），浅色文字

响应式布局

• 桌面端：最大宽度 850px，居中显示
• 移动端：自适应边距，优化字体大小

排版优化

• 使用系统字体栈 + 中文字体优化
• 合理的行高和段落间距
• 代码块使用专业等宽字体

示例

输入 example.md:

# 我的文档

这是一段**粗体**和*斜体*文字。

## 代码示例

def hello(name):

"""打招呼函数"""

return f"Hello, {name}!"

print(hello("World"))

## 列表

- 项目 1
- 项目 2
- 项目 3

运行:

python scripts/md2html.py example.md

输出 example.html - 一个精美的网页，代码带语法高亮，支持自动主题切换。

资源说明

scripts/md2html.py

核心转换脚本，支持命令行参数：

• input: 输入 Markdown 文件路径（必需）
• -o, --output: 输出 HTML 文件路径（可选，默认与输入同名）
• -t, --title: 页面标题（可选，默认使用文件名）

注意事项

• 转换后的 HTML 是独立的单文件，包含所有样式
• 图片链接保持原样，建议使用相对路径或完整 URL
• 中文内容已优化显示效果
• 代码块语言标记会影响语法高亮效果