Skill: italks/md-wechat (version 0.1.1)

--- name: md-wechat description: 将 Markdown 文档转换为微信公众号格式的技能。当用户需要将 Markdown 文件排版为微信公众号文章格式时使用此技能。支持自定义主题、字体、颜色、代码高亮等配置。触发词：微信排版、公众号格式、md转微信、markdown转wechat、公众号文章。 --- # 微信 Markdown 排版 (md-wechat) ## Overview 将 Markdown 文档转换为适配微信公众号的 HTML 格式。支持三种预设主题（经典、优雅、简洁），可自定义字体、颜色、代码高亮等样式，生成的 HTML 可直接复制粘贴到微信公众号编辑器使用。 **版本 2.0.0** - 使用 Node.js 重写，完整支持所有功能！ ## 核心功能 ### 基础语法 - **标题**：h1-h6，带样式装饰 - **段落**：自动排版，支持缩进和两端对齐 - **列表**：有序/无序列表，支持嵌套 - **引用**：单层和多级嵌套引用 - **表格**：GFM 表格语法 - **分隔线**：水平分割线 ### 扩展语法 - **删除线**：`~~删除线~~` - **高亮**：`==高亮==` - **下划线**：`++下划线++` - **Ruby 注音**：`[文字]{注音}` 或 `[文字]^(注音)` ### 高级功能 - **代码高亮**：使用 highlight.js，支持 100+ 语言 - **Mac 风格代码块**：带红黄绿装饰按钮 - **数学公式**：KaTeX 渲染，支持行内和块级公式 - **Mermaid 图表**：流程图、时序图、饼图等 - **PlantUML 图表**：UML 类图、时序图等 - **Infographic 信息图**：数据可视化图表 ## Workflow ### 1. 环境准备 **前提条件**：Node.js >= 18.0.0 **推荐安装方式（更安全）**： ```bash # 手动安装依赖，可审查 package.json npm install # 然后运行转换 node scripts/convert.js article.md --no-auto-install ``` **自动安装方式**： ```bash # 脚本会自动检测并安装缺失依赖 node scripts/convert.js article.md ``` > **安全提示**：建议在隔离环境（Docker/沙盒）中首次运行，或使用 `--no-auto-install` 参数手动控制依赖安装。 ### 2. 转换流程 **输入**： - Markdown 文件路径（必需） - 配置选项（可选） **处理流程**： ``` ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ 读取 MD 文件 │ -> │ 解析 Markdown │ -> │ 渲染特殊元素 │ -> │ 生成 HTML │ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │ │ v v ┌─────────────┐ ┌─────────────────────┐ │ marked 解析 │ │ KaTeX 渲染公式 │ │ 扩展语法处理 │ │ Puppeteer 渲染图表 │ └─────────────┘ └─────────────────────┘ ``` **输出**： - 文件名：`{原文件名}-wechat.html` - 特点：样式内联，可直接复制到微信公众号 ### 3. 输出格式 生成的 HTML 特点： - 所有样式内联（微信公众号要求） - 支持 GFM（GitHub Flavored Markdown） - 代码块带 Mac 风格装饰 - 图片带图注 - 外链自动添加引用标记 - 数学公式已渲染为 HTML - 图表已渲染为 SVG ## Configuration ### 配置文件 `md-config.json` ```json { "version": "1.0.0", "theme": { "name": "default" }, "style": { "fontFamily": "-apple-system-font, BlinkMacSystemFont, Helvetica Neue, PingFang SC, sans-serif", "fontSize": "16px", "primaryColor": "#0F4C81", "textColor": "#3f3f3f", "bgColor": "#ffffff", "lineHeight": 1.75 }, "codeBlock": { "themeUrl": "https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css", "themeName": "atom-one-dark", "isMacStyle": true, "showLineNumber": false }, "image": { "legend": "alt-title", "borderRadius": "4px" }, "link": { "citeStatus": false, "color": "#0F4C81" }, "content": { "countStatus": true, "useIndent": false, "useJustify": false, "padding": "20px" }, "headingStyles": { "h1": "default", "h2": "default", "h3": "default", "h4": "default", "h5": "default", "h6": "default" }, "customCSS": "" } ``` ### 配置提取功能 从已排版好的 HTML 文件中提取样式配置，实现样式复用： ```bash # 从渲染后的 HTML 提取配置 node scripts/extract-config.js example-result.html -o my-style.json # 同时提供 Markdown 源文件，增强分析 node scripts/extract-config.js example-result.html -m example.md -o my-style.json # 指定配置名称 node scripts/extract-config.js output.html --name "my-brand" -o my-brand-config.json ``` **可提取的样式参数**： | 参数 | 说明 | 提取方式 | |-----|------|---------| | 主色调 | 链接、标题等元素的颜色 | 分析 HTML 中的颜色值 | | 字体 | 文章正文字体 | 从 CSS 中提取 | | 字号 | 正文字号 | 从 CSS 中提取 | | 代码块主题 | highlight.js 主题 | 从 CSS URL 中识别 | | Mac 风格代码块 | 是否有红黄绿按钮 | 检测 SVG 元素 | | 背景色 | 文章背景色 | 从 body 样式中提取 | | 文本颜色 | 正文颜色 | 从段落样式中提取 | | 行高 | 文本行高 | 从 CSS 中提取 | | 图片圆角 | 图片边框圆角 | 从 img 样式中提取 | ### 使用提取的配置 ```bash # 使用提取的配置文件进行转换 node scripts/convert.js article.md -c my-style.json -o article-output.html # 命令行参数覆盖配置文件 node scripts/convert.js article.md -c my-style.json --color "#FF6600" ``` ### 命令行参数 ```bash md-wechat <input> [options] 选项： -o, --output <path> 输出 HTML 文件路径 -c, --config <path> 配置文件路径 (默认: md-config.json) --theme <name> 主题名称 (default/grace/simple) --color <color> 主题颜色 (覆盖配置文件) --font <font> 字体系列 (覆盖配置文件) --font-size <size> 字体大小 (覆盖配置文件) --bg-color <color> 背景颜色 (覆盖配置文件) --text-color <color> 文本颜色 (覆盖配置文件) --no-auto-install 禁用自动安装依赖 ``` ## Usage Examples ### 基础用法 ```bash # 转换单个文件 node scripts/convert.js article.md # 指定输出路径 node scripts/convert.js article.md -o output.html # 使用自定义主题色 node scripts/convert.js article.md --color "#009874" ``` ### npm scripts ```bash # 安装依赖 npm install # 测试转换 npm run test ``` ### 编程方式使用 ```javascript import { MDToWechatConverter } from './scripts/convert.js'; const converter = new MDToWechatConverter({ primaryColor: '#0F4C81', macStyleCode: true }); const html = await converter.convert(markdownText); console.log(html); ``` ## Dependencies ### 核心依赖 | 依赖 | 版本 | 用途 | |-----|------|------| | `marked` | ^12.0.0 | Markdown 解析 | | `highlight.js` | ^11.9.0 | 代码语法高亮 | | `katex` | ^0.16.9 | 数学公式渲染 | | `juice` | ^10.0.0 | CSS 内联化 | | `puppeteer` | ^22.0.0 | 图表渲染（无头浏览器） | | `commander` | ^12.0.0 | 命令行参数解析 | | `chalk` | ^5.3.0 | 终端彩色输出 | ### 自动安装机制 脚本会自动检测缺失的依赖并安装： 1. 检查 `node_modules` 目录 2. 缺失时自动执行 `npm install` 3. 安装完成后继续执行 ### 可选依赖 对于 PlantUML 支持，需要安装 Java 运行时环境。 ## 功能支持矩阵 | 功能 | Python 版本 | Node.js 版本 | |-----|------------|--------------| | 基础 Markdown | ✅ | ✅ | | GFM 扩展 | ✅ | ✅ | | 删除线/高亮/下划线 | ✅ | ✅ | | Ruby 注音 | ✅ | ✅ | | 代码高亮 | ✅ | ✅ | | 数学公式 | ❌ 原始代码 | ✅ KaTeX 渲染 | | Mermaid 图表 | ❌ 原始代码 | ✅ SVG 渲染 | | PlantUML | ❌ 原始代码 | ⚠️ 部分 | | Infographic | ❌ 原始代码 | ⚠️ 部分 | | 样式内联 | ❌ | ✅ juice | ## Implementation Notes ### 架构设计 ``` convert.js ├── 扩展语法处理器 │ ├── strikethrough 删除线 │ ├── highlight 高亮 │ ├── underline 下划线 │ ├── rubyBrace Ruby 注音 {} │ └── rubyCaret Ruby 注音 ^() │ ├── 数学公式渲染 │ ├── mathExtension 块级公式 │ └── inlineMath 行内公式 │ ├── 图表渲染 │ └── mermaidExtension Mermaid → SVG │ ├── 代码块处理 │ └── codeBlockExtension 代码高亮 + Mac 装饰 │ └── 核心转换器 └── MDToWechatConverter ├── setupMarked() 配置解析器 ├── convert() 主转换流程 ├── renderMermaid() 渲染 Mermaid └── wrapHTML() 包装输出 ``` ### 关键技术点 1. **marked 扩展系统**：使用 marked 的 extension API 实现自定义语法 2. **KaTeX 服务端渲染**：在 Node.js 中直接渲染数学公式为 HTML 3. **Puppeteer 无头浏览器**：渲染 Mermaid 等 JavaScript 依赖的图表 4. **CSS 内联化**：使用 juice 库将 CSS 样式内联到 HTML 元素 ### 微信公众号适配 关键适配点： 1. **样式内联**：所有 CSS 必须内联到 style 属性 2. **选择器限制**：不支持 class 选择器，使用标签和内联样式 3. **外部链接**：微信会屏蔽外链，建议添加引用标记 4. **图片处理**：需上传到微信服务器或使用支持的图床 5. **代码块**：使用 pre + code 标签，添加 Mac 装饰 6. **KaTeX 样式**：通过 CDN 引入，复制时需保留 ## Troubleshooting ### 常见问题 **Q: Puppeteer 安装失败？** A: Puppeteer 需要下载 Chromium，可能需要配置镜像： ```bash npm config set puppeteer_download_host=https://cdn.npmmirror.com/mirrors npm install puppeteer ``` **Q: 数学公式显示异常？** A: 确保 KaTeX CSS 正确加载，检查网络连接。 **Q: Mermaid 图表渲染失败？** A: 检查 Puppeteer 是否正确安装，可能需要额外的系统依赖。 **Q: 复制到公众号后样式丢失？** A: 1. 使用浏览器打开 HTML 文件 2. 全选复制（Ctrl+A） 3. 粘贴到公众号编辑器 **Q: 图片不显示？** A: 微信公众号不支持外链图片，需要： 1. 上传图片到微信后台 2. 使用微信支持的图床（如腾讯云） ## File Structure ``` md-wechat/ ├── skill.md # 本文档 ├── package.json # Node.js 依赖配置 ├── md-config.json # 默认配置文件 ├── scripts/ │ ├── convert.js # 核心转换脚本 (Node.js) │ ├── extract-config.js # 配置提取脚本 │ └── convert.py # Python 备用脚本 ├── references/ │ ├── config-reference.md # 配置参考 │ └── theme-reference.md # 主题参考 └── assets/ └── themes/ ├── base.css # 基础样式 ├── default.css # 经典主题 ├── grace.css # 优雅主题 └── simple.css # 简洁主题 ``` ## Version History - **2.0.0** (2024-03) - 使用 Node.js 重写，完整支持数学公式和图表渲染 - **1.0.0** (2024-03) - Python 版本，支持基础 Markdown 和扩展语法 ## Based on - [doocs/md](https://github.com/doocs/md) - 原始项目灵感来源 - [marked](https://marked.js.org/) - Markdown 解析器 - [KaTeX](https://katex.org/) - 数学公式渲染 - [Mermaid](https://mermaid.js.org/) - 图表渲染

path: README.md
content: # md-wechat

将 Markdown 文档转换为微信公众号格式的排版工具。支持自定义主题、字体、颜色、代码高亮等配置，生成的 HTML 可直接复制粘贴到微信公众号编辑器使用。

## 功能特性

- 完整支持 Markdown 基础语法和 GFM 扩展
- 支持数学公式渲染（KaTeX）
- 支持 Mermaid 流程图渲染
- Mac 风格代码块（红黄绿装饰按钮）
- 代码语法高亮（highlight.js）
- 扩展语法支持：删除线、高亮、下划线、Ruby 注音
- 从排版文件提取配置，实现样式复用
- 自动检测并安装缺失依赖

## 快速开始

### 环境要求

- Node.js >= 18.0.0

### 安装

```bash
git clone https://github.com/italks/md-wechat.git
cd md-wechat
npm install
```

> **安全建议**：首次使用建议检查 `package.json` 中的依赖，或在隔离环境中运行。

### 基础用法

```bash
# 转换 Markdown 文件
node scripts/convert.js your-article.md
```

转换完成后，会在同目录生成 `your-article-wechat.html` 文件。

## 主要流程

### 1. Markdown 直接生成排版

**首次使用时**，如果没有配置文件，会自动生成默认配置文件 `md-config.json`：

```bash
node scripts/convert.js article.md
```

输出：
- `article-wechat.html` - 排版后的 HTML 文件
- `md-config.json` - 默认配置文件（如果不存在）

### 2. 提取自定义配置

从已排版好的 HTML 文件中提取样式配置：

```bash
node scripts/extract-config.js article-wechat.html -o my-style.json
```

可提取的样式参数：

| 参数 | 说明 |
|-----|------|
| 主色调 | 链接、标题等元素的颜色 |
| 字体 | 文章正文字体 |
| 字号 | 正文字号 |
| 代码块主题 | highlight.js 主题名称 |
| Mac 风格代码块 | 是否启用红黄绿按钮装饰 |
| 背景色/文本颜色 | 文章背景和文字颜色 |
| 行高 | 文本行高 |

### 3. 使用自定义配置排版

使用提取的配置文件进行排版：

```bash
# 使用配置文件
node scripts/convert.js new-article.md -c my-style.json

# 命令行参数覆盖配置
node scripts/convert.js new-article.md -c my-style.json --color "#009874"
```

## 配置文件说明

配置文件 `md-config.json` 结构：

```json
{
  "version": "1.0.0",
  "theme": {
    "name": "default"
  },
  "style": {
    "fontFamily": "-apple-system-font, BlinkMacSystemFont, Helvetica Neue, PingFang SC, sans-serif",
    "fontSize": "16px",
    "primaryColor": "#0F4C81",
    "textColor": "#3f3f3f",
    "bgColor": "#ffffff",
    "lineHeight": 1.75
  },
  "codeBlock": {
    "themeName": "atom-one-dark",
    "isMacStyle": true
  },
  "content": {
    "countStatus": true,
    "useIndent": false,
    "useJustify": false,
    "padding": "20px"
  }
}
```

## 命令行参数

### convert.js - Markdown 转换

```bash
node scripts/convert.js <input> [options]

参数：
  input                  输入 Markdown 文件路径

选项：
  -o, --output <path>    输出 HTML 文件路径
  -c, --config <path>    配置文件路径 (默认: md-config.json)
  --color <color>        主题颜色 (覆盖配置文件)
  --font <font>          字体系列 (覆盖配置文件)
  --font-size <size>     字体大小 (覆盖配置文件)
  --bg-color <color>     背景颜色 (覆盖配置文件)
  --text-color <color>   文本颜色 (覆盖配置文件)
  --no-auto-install      禁用自动安装依赖
```

### extract-config.js - 配置提取

```bash
node scripts/extract-config.js <input> [options]

参数：
  input                  渲染后的 HTML 文件路径

选项：
  -o, --output <path>    输出配置文件路径
  -m, --markdown <path>  对应的 Markdown 文件 (增强分析)
  --name <name>          配置名称 (默认: extracted)
```

## 功能支持

| 功能 | 支持 |
|-----|:----:|
| 基础 Markdown | ✅ |
| GFM 扩展（表格、任务列表等） | ✅ |
| 代码语法高亮 | ✅ |
| Mac 风格代码块 | ✅ |
| 数学公式 (KaTeX) | ✅ |
| Mermaid 流程图 | ✅ |
| 删除线/高亮/下划线 | ✅ |
| Ruby 注音 | ✅ |
| 样式内联 | ✅ |
| 配置提取与复用 | ✅ |

## 与 doocs/md 功能对比

本项目受 [doocs/md](https://github.com/doocs/md) 启发开发，以下是功能对比：

| 功能 | doocs/md | md-wechat |
|-----|:--------:|:---------:|
| **运行环境** | 浏览器/在线 | Node.js 命令行 |
| **使用方式** | 在线编辑器 | CLI 批量处理 |
| 基础 Markdown | ✅ | ✅ |
| GFM 扩展 | ✅ | ✅ |
| 代码语法高亮 | ✅ | ✅ |
| Mac 风格代码块 | ✅ | ✅ |
| 数学公式 (LaTeX) | ✅ | ✅ KaTeX |
| Mermaid 图表 | ✅ | ✅ |
| PlantUML 图表 | ✅ | ⚠️ 部分 |
| Infographic 信息图 | ✅ | ⚠️ 部分 |
| 删除线/高亮/下划线 | ✅ | ✅ |
| Ruby 注音 | ✅ | ✅ |
| **配置提取** | ❌ | ✅ |
| **配置复用** | ❌ | ✅ |
| **批量处理** | ❌ | ✅ |
| **CLI 自动化** | ❌ | ✅ |
| **依赖自动安装** | ❌ | ✅ |

### 适用场景

**doocs/md 更适合：**
- 在线实时编辑预览
- 单篇文章快速排版
- 可视化操作

**md-wechat 更适合：**
- 批量文章处理
- 自动化工作流
- CI/CD 集成
- 样式配置复用
- 团队协作排版

## 项目结构

```
md-wechat/
├── README.md                    # 项目说明
├── README_EN.md                 # 英文说明
├── skill.md                     # 技能详细文档
├── package.json                 # Node.js 依赖配置
├── md-config.json               # 默认配置文件
├── scripts/
│   ├── convert.js               # 核心转换脚本
│   └── extract-config.js        # 配置提取脚本
└── example.md                   # 示例 Markdown 文件
```

## 使用到微信公众号

1. 使用本工具转换 Markdown 文件生成 HTML
2. 用浏览器打开生成的 HTML 文件
3. 全选复制（Ctrl+A / Cmd+A）
4. 粘贴到微信公众号编辑器

## 致谢

本项目灵感来源于 [doocs/md](https://github.com/doocs/md)，感谢该项目提供的优秀思路和实现参考。

同时也感谢以下开源项目：

- [marked](https://marked.js.org/) - Markdown 解析器
- [KaTeX](https://katex.org/) - 数学公式渲染
- [highlight.js](https://highlightjs.org/) - 代码语法高亮
- [Mermaid](https://mermaid.js.org/) - 图表渲染

## License

MIT License


path: README_EN.md
content: # md-wechat

A tool for converting Markdown documents to WeChat Official Account format. Supports custom themes, fonts, colors, code highlighting, and more. The generated HTML can be directly copied and pasted into the WeChat Official Account editor.

## Features

- Full support for Markdown basic syntax and GFM extensions
- Math formula rendering (KaTeX)
- Mermaid diagram rendering
- Mac-style code blocks (red/yellow/green decorative buttons)
- Code syntax highlighting (highlight.js)
- Extended syntax support: strikethrough, highlight, underline, Ruby annotations
- Extract configuration from styled documents for style reuse
- Automatic detection and installation of missing dependencies

## Quick Start

### Requirements

- Node.js >= 18.0.0

### Installation

```bash
git clone https://github.com/italks/md-wechat.git
cd md-wechat
npm install
```

### Basic Usage

```bash
# Convert Markdown file
node scripts/convert.js your-article.md
```

After conversion, a `your-article-wechat.html` file will be generated in the same directory.

## Main Workflow

### 1. Direct Markdown to WeChat Format Conversion

**On first use**, if no configuration file exists, a default configuration file `md-config.json` will be automatically generated:

```bash
node scripts/convert.js article.md
```

Output:
- `article-wechat.html` - Styled HTML file
- `md-config.json` - Default configuration file (if not exists)

### 2. Extract Custom Configuration

Extract style configuration from a styled HTML file:

```bash
node scripts/extract-config.js article-wechat.html -o my-style.json
```

Extractable style parameters:

| Parameter | Description |
|-----|------|
| Primary Color | Color for links, headings, etc. |
| Font Family | Article body font |
| Font Size | Body font size |
| Code Block Theme | highlight.js theme name |
| Mac-style Code Block | Enable red/yellow/green button decoration |
| Background/Text Color | Article background and text colors |
| Line Height | Text line height |

### 3. Use Custom Configuration for Styling

Use the extracted configuration file for styling:

```bash
# Use configuration file
node scripts/convert.js new-article.md -c my-style.json

# Override configuration with command line arguments
node scripts/convert.js new-article.md -c my-style.json --color "#009874"
```

## Configuration File

Configuration file `md-config.json` structure:

```json
{
  "version": "1.0.0",
  "theme": {
    "name": "default"
  },
  "style": {
    "fontFamily": "-apple-system-font, BlinkMacSystemFont, Helvetica Neue, PingFang SC, sans-serif",
    "fontSize": "16px",
    "primaryColor": "#0F4C81",
    "textColor": "#3f3f3f",
    "bgColor": "#ffffff",
    "lineHeight": 1.75
  },
  "codeBlock": {
    "themeName": "atom-one-dark",
    "isMacStyle": true
  },
  "content": {
    "countStatus": true,
    "useIndent": false,
    "useJustify": false,
    "padding": "20px"
  }
}
```

## Command Line Interface

### convert.js - Markdown Conversion

```bash
node scripts/convert.js <input> [options]

Arguments:
  input                  Input Markdown file path

Options:
  -o, --output <path>    Output HTML file path
  -c, --config <path>    Configuration file path (default: md-config.json)
  --color <color>        Primary color (override config file)
  --font <font>          Font family (override config file)
  --font-size <size>     Font size (override config file)
  --bg-color <color>     Background color (override config file)
  --text-color <color>   Text color (override config file)
  --no-auto-install      Disable automatic dependency installation
```

### extract-config.js - Configuration Extraction

```bash
node scripts/extract-config.js <input> [options]

Arguments:
  input                  Rendered HTML file path

Options:
  -o, --output <path>    Output configuration file path
  -m, --markdown <path>  Corresponding Markdown file (enhanced analysis)
  --name <name>          Configuration name (default: extracted)
```

## Feature Support

| Feature | Support |
|---------|:--------:|
| Basic Markdown | ✅ |
| GFM Extensions (tables, task lists, etc.) | ✅ |
| Code Syntax Highlighting | ✅ |
| Mac-style Code Blocks | ✅ |
| Math Formulas (KaTeX) | ✅ |
| Mermaid Diagrams | ✅ |
| Strikethrough/Highlight/Underline | ✅ |
| Ruby Annotations | ✅ |
| Inline Styles | ✅ |
| Configuration Extraction & Reuse | ✅ |

## Comparison with doocs/md

This project is inspired by [doocs/md](https://github.com/doocs/md). Here's a feature comparison:

| Feature | doocs/md | md-wechat |
|---------|:--------:|:---------:|
| **Runtime Environment** | Browser/Online | Node.js CLI |
| **Usage** | Online Editor | CLI Batch Processing |
| Basic Markdown | ✅ | ✅ |
| GFM Extensions | ✅ | ✅ |
| Code Syntax Highlighting | ✅ | ✅ |
| Mac-style Code Blocks | ✅ | ✅ |
| Math Formulas (LaTeX) | ✅ | ✅ KaTeX |
| Mermaid Diagrams | ✅ | ✅ |
| PlantUML Diagrams | ✅ | ⚠️ Partial |
| Infographic Charts | ✅ | ⚠️ Partial |
| Strikethrough/Highlight/Underline | ✅ | ✅ |
| Ruby Annotations | ✅ | ✅ |
| **Configuration Extraction** | ❌ | ✅ |
| **Configuration Reuse** | ❌ | ✅ |
| **Batch Processing** | ❌ | ✅ |
| **CLI Automation** | ❌ | ✅ |
| **Auto Dependency Installation** | ❌ | ✅ |

### Use Cases

**doocs/md is better for:**
- Real-time online editing and preview
- Quick styling of single articles
- Visual operations

**md-wechat is better for:**
- Batch article processing
- Automated workflows
- CI/CD integration
- Style configuration reuse
- Team collaboration on styling

## Project Structure

```
md-wechat/
├── README.md                    # Project documentation (Chinese)
├── README_EN.md                 # Project documentation (English)
├── skill.md                     # Detailed skill documentation
├── package.json                 # Node.js dependency configuration
├── md-config.json               # Default configuration file
├── scripts/
│   ├── convert.js               # Core conversion script
│   └── extract-config.js        # Configuration extraction script
└── example.md                   # Example Markdown file
```

## Using with WeChat Official Account

1. Convert Markdown file using this tool to generate HTML
2. Open the generated HTML file in a browser
3. Select all and copy (Ctrl+A / Cmd+A)
4. Paste into WeChat Official Account editor

## Acknowledgments

This project was inspired by [doocs/md](https://github.com/doocs/md). Thanks to that project for providing excellent ideas and implementation references.

Also thanks to the following open source projects:

- [marked](https://marked.js.org/) - Markdown parser
- [KaTeX](https://katex.org/) - Math formula rendering
- [highlight.js](https://highlightjs.org/) - Code syntax highlighting
- [Mermaid](https://mermaid.js.org/) - Diagram rendering

## License

MIT License


path: assets/md-wechat-features.svg
content: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="cardGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.95" />
      <stop offset="100%" style="stop-color:#f8f9fa;stop-opacity:0.9" />
    </linearGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.15"/>
    </filter>
  </defs>
  
  <!-- Background -->
  <rect width="800" height="500" fill="url(#bgGradient)"/>
  
  <!-- Title -->
  <text x="400" y="55" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#ffffff" text-anchor="middle">md-wechat 核心功能</text>
  <text x="400" y="82" font-family="Arial, sans-serif" font-size="14" fill="#ffffff" opacity="0.9" text-anchor="middle">命令行批量排版 + OpenClaw 技能</text>
  
  <!-- Card 1: 命令行批量处理 -->
  <g filter="url(#shadow)">
    <rect x="40" y="110" width="220" height="160" rx="12" fill="url(#cardGradient)"/>
    <circle cx="150" cy="145" r="22" fill="#4CAF50" opacity="0.15"/>
    <text x="150" y="152" font-family="Arial, sans-serif" font-size="24" fill="#4CAF50" text-anchor="middle">⚡</text>
    <text x="150" y="190" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333" text-anchor="middle">命令行批量处理</text>
    <text x="150" y="215" font-family="monospace" font-size="11" fill="#666" text-anchor="middle">node scripts/convert.js</text>
    <text x="150" y="232" font-family="monospace" font-size="11" fill="#666" text-anchor="middle">article.md</text>
    <text x="150" y="255" font-family="Arial, sans-serif" font-size="12" fill="#888" text-anchor="middle">一行命令完成排版</text>
  </g>
  
  <!-- Card 2: 配置提取与复用 -->
  <g filter="url(#shadow)">
    <rect x="290" y="110" width="220" height="160" rx="12" fill="url(#cardGradient)"/>
    <circle cx="400" cy="145" r="22" fill="#2196F3" opacity="0.15"/>
    <text x="400" y="152" font-family="Arial, sans-serif" font-size="24" fill="#2196F3" text-anchor="middle">🔄</text>
    <text x="400" y="190" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333" text-anchor="middle">配置提取与复用</text>
    <text x="400" y="215" font-family="Arial, sans-serif" font-size="12" fill="#666" text-anchor="middle">从排版文件提取样式</text>
    <text x="400" y="235" font-family="Arial, sans-serif" font-size="12" fill="#666" text-anchor="middle">一键复用到新文章</text>
    <text x="400" y="255" font-family="Arial, sans-serif" font-size="12" fill="#888" text-anchor="middle">保持统一样式风格</text>
  </g>
  
  <!-- Card 3: OpenClaw 技能 -->
  <g filter="url(#shadow)">
    <rect x="540" y="110" width="220" height="160" rx="12" fill="url(#cardGradient)"/>
    <circle cx="650" cy="145" r="22" fill="#9C27B0" opacity="0.15"/>
    <text x="650" y="152" font-family="Arial, sans-serif" font-size="24" fill="#9C27B0" text-anchor="middle">🤖</text>
    <text x="650" y="190" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333" text-anchor="middle">OpenClaw 技能</text>
    <text x="650" y="215" font-family="Arial, sans-serif" font-size="12" fill="#666" text-anchor="middle">clawhub install md-wechat</text>
    <text x="650" y="235" font-family="Arial, sans-serif" font-size="12" fill="#666" text-anchor="middle">直接对话完成排版</text>
    <text x="650" y="255" font-family="Arial, sans-serif" font-size="12" fill="#888" text-anchor="middle">AI 助手自动化处理</text>
  </g>
  
  <!-- Bottom Features Row -->
  <g filter="url(#shadow)">
    <rect x="40" y="295" width="720" height="80" rx="12" fill="url(#cardGradient)"/>
    <text x="400" y="325" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#333" text-anchor="middle">完整功能支持</text>
    
    <!-- Feature icons -->
    <text x="100" y="355" font-family="Arial, sans-serif" font-size="20" text-anchor="middle">📐</text>
    <text x="100" y="372" font-family="Arial, sans-serif" font-size="11" fill="#666" text-anchor="middle">数学公式</text>
    
    <text x="220" y="355" font-family="Arial, sans-serif" font-size="20" text-anchor="middle">📊</text>
    <text x="220" y="372" font-family="Arial, sans-serif" font-size="11" fill="#666" text-anchor="middle">Mermaid图表</text>
    
    <text x="340" y="355" font-family="Arial, sans-serif" font-size="20" text-anchor="middle">💻</text>
    <text x="340" y="372" font-family="Arial, sans-serif" font-size="11" fill="#666" text-anchor="middle">代码高亮</text>
    
    <text x="460" y="355" font-family="Arial, sans-serif" font-size="20" text-anchor="middle">🍎</text>
    <text x="460" y="372" font-family="Arial, sans-serif" font-size="11" fill="#666" text-anchor="middle">Mac代码块</text>
    
    <text x="580" y="355" font-family="Arial, sans-serif" font-size="20" text-anchor="middle">📦</text>
    <text x="580" y="372" font-family="Arial, sans-serif" font-size="11" fill="#666" text-anchor="middle">自动安装依赖</text>
    
    <text x="700" y="355" font-family="Arial, sans-serif" font-size="20" text-anchor="middle">🎨</text>
    <text x="700" y="372" font-family="Arial, sans-serif" font-size="11" fill="#666" text-anchor="middle">样式内联</text>
  </g>
  
  <!-- Footer -->
  <text x="400" y="410" font-family="Arial, sans-serif" font-size="13" fill="#ffffff" text-anchor="middle" opacity="0.9">基于 doocs/md 开发 | 有意捐赠给 doocs 社区</text>
  
  <!-- Links -->
  <g>
    <rect x="180" y="435" width="160" height="36" rx="18" fill="#ffffff" opacity="0.2"/>
    <text x="260" y="458" font-family="Arial, sans-serif" font-size="12" fill="#ffffff" text-anchor="middle">GitHub: italks/md-wechat</text>
  </g>
  <g>
    <rect x="460" y="435" width="160" height="36" rx="18" fill="#ffffff" opacity="0.2"/>
    <text x="540" y="458" font-family="Arial, sans-serif" font-size="12" fill="#ffffff" text-anchor="middle">ClawHub: clawhub.ai</text>
  </g>
</svg>

path: assets/themes/base.css
content: /**
 * MD 基础主题样式
 * 包含所有元素的基础样式和 CSS 变量定义
 */

/* ==================== CSS 变量定义 ==================== */
:root {
  --md-primary-color: #0F4C81;
  --md-font-family: -apple-system-font, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;
  --md-font-size: 16px;
  --foreground: 0 0% 10%;
  --blockquote-background: #f7f7f7;
}

/* ==================== 容器样式 ==================== */
section,
container {
  font-family: var(--md-font-family);
  font-size: var(--md-font-size);
  line-height: 1.75;
  text-align: left;
  color: #333;
}

/* 去除第一个元素的 margin-top */
section > :first-child {
  margin-top: 0 !important;
}

/* ==================== 标题基础样式 ==================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.4;
  color: #333;
}

h1 { font-size: calc(var(--md-font-size) * 1.4); }
h2 { font-size: calc(var(--md-font-size) * 1.3); }
h3 { font-size: calc(var(--md-font-size) * 1.2); }
h4 { font-size: calc(var(--md-font-size) * 1.1); }
h5 { font-size: var(--md-font-size); }
h6 { font-size: var(--md-font-size); }

/* ==================== 段落 ==================== */
p {
  margin: 1.2em 8px;
  letter-spacing: 0.05em;
  color: #333;
}

/* ==================== 引用块 ==================== */
blockquote {
  font-style: normal;
  padding: 1em;
  border-left: 4px solid var(--md-primary-color);
  border-radius: 6px;
  color: #333;
  background: var(--blockquote-background);
  margin: 1em 8px;
}

blockquote p {
  margin: 0;
}

/* ==================== 代码块 ==================== */
pre {
  font-size: 90%;
  overflow-x: auto;
  border-radius: 8px;
  padding: 1em;
  line-height: 1.5;
  margin: 10px 8px;
  background: #282c34;
  color: #abb2bf;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-family: Menlo, Monaco, 'Courier New', monospace;
}

/* ==================== 行内代码 ==================== */
code {
  font-size: 90%;
  color: #d14;
  background: rgba(27, 31, 35, 0.05);
  padding: 3px 5px;
  border-radius: 4px;
  font-family: Menlo, Monaco, 'Courier New', monospace;
}

/* ==================== 图片 ==================== */
img {
  display: block;
  max-width: 100%;
  margin: 0.5em auto;
  border-radius: 4px;
}

figure {
  margin: 1.5em 8px;
}

figcaption {
  text-align: center;
  color: #888;
  font-size: 0.8em;
  margin-top: 0.5em;
}

/* ==================== 列表 ==================== */
ol, ul {
  padding-left: 1.5em;
  margin: 0.5em 8px;
  color: #333;
}

li {
  margin: 0.3em 0;
  display: block;
}

/* ==================== 脚注 ==================== */
.footnotes {
  margin: 0.5em 8px;
  font-size: 80%;
  color: #666;
}

/* ==================== 分隔线 ==================== */
hr {
  border: none;
  border-top: 2px solid #eee;
  margin: 1.5em 0;
}

/* ==================== 强调 ==================== */
strong {
  color: var(--md-primary-color);
  font-weight: bold;
}

em {
  font-style: italic;
}

/* ==================== 链接 ==================== */
a {
  color: #576b95;
  text-decoration: none;
}

/* ==================== 表格 ==================== */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  color: #333;
}

th, td {
  border: 1px solid #dfdfdf;
  padding: 0.5em;
  text-align: left;
}

th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: bold;
}

/* ==================== 数学公式 ==================== */
.katex-inline {
  max-width: 100%;
  overflow-x: auto;
}

.katex-block {
  max-width: 100%;
  overflow-x: auto;
  padding: 0.5em 0;
  text-align: center;
}

/* ==================== 标记高亮 ==================== */
.markup-highlight {
  background-color: var(--md-primary-color);
  padding: 2px 4px;
  border-radius: 2px;
  color: #fff;
}

.markup-underline {
  text-decoration: underline;
  text-decoration-color: var(--md-primary-color);
}

/* ==================== 警告块基础样式 ==================== */
.markdown-alert {
  padding: 1em;
  border-radius: 6px;
  margin: 1em 8px;
}

.markdown-alert-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
  font-weight: bold;
}


path: assets/themes/default.css
content: /**
 * MD 默认主题（经典主题）
 * 
 * 特点：
 * - 标题样式丰富，层次分明
 * - 二级标题使用主题色背景
 * - 代码块深色风格
 * - 适合技术文章和教程
 * 
 * 如需使用主题色，请使用 var(--md-primary-color)
 */

/* ==================== 一级标题 ==================== */
h1 {
  display: table;
  padding: 0 1em;
  border-bottom: 2px solid var(--md-primary-color);
  margin: 2em auto 1em;
  color: #333;
  font-size: calc(var(--md-font-size) * 1.2);
  font-weight: bold;
  text-align: center;
}

/* ==================== 二级标题 ==================== */
h2 {
  display: table;
  padding: 0.3em 1em;
  margin: 2em auto 1em;
  color: #fff;
  background: var(--md-primary-color);
  font-size: calc(var(--md-font-size) * 1.2);
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}

/* ==================== 三级标题 ==================== */
h3 {
  padding-left: 8px;
  border-left: 3px solid var(--md-primary-color);
  margin: 1.5em 8px 0.75em 0;
  color: #333;
  font-size: calc(var(--md-font-size) * 1.1);
  font-weight: bold;
  line-height: 1.2;
}

/* ==================== 四级标题 ==================== */
h4 {
  margin: 1.5em 8px 0.5em;
  color: var(--md-primary-color);
  font-size: calc(var(--md-font-size) * 1);
  font-weight: bold;
}

/* ==================== 五级标题 ==================== */
h5 {
  margin: 1.5em 8px 0.5em;
  color: var(--md-primary-color);
  font-size: calc(var(--md-font-size) * 1);
  font-weight: bold;
}

/* ==================== 六级标题 ==================== */
h6 {
  margin: 1.5em 8px 0.5em;
  font-size: calc(var(--md-font-size) * 1);
  color: var(--md-primary-color);
}

/* ==================== 段落 ==================== */
p {
  margin: 1.2em 8px;
  letter-spacing: 0.1em;
  color: #333;
}

/* ==================== 引用块 ==================== */
blockquote {
  font-style: normal;
  padding: 1em;
  border-left: 4px solid var(--md-primary-color);
  border-radius: 6px;
  color: #333;
  background: #f7f7f7;
  margin-bottom: 1em;
}

blockquote > p {
  display: block;
  font-size: 1em;
  letter-spacing: 0.1em;
  color: #333;
  margin: 0;
}

/* ==================== GFM 警告块 ==================== */
.alert-title-note { color: #478be6; }
.alert-title-tip { color: #57ab5a; }
.alert-title-info { color: #93c5fd; }
.alert-title-important { color: #986ee2; }
.alert-title-warning { color: #c69026; }
.alert-title-caution { color: #e5534b; }

/* SVG 图标颜色 */
.alert-icon-note { fill: #478be6; }
.alert-icon-tip { fill: #57ab5a; }
.alert-icon-info { fill: #93c5fd; }
.alert-icon-important { fill: #986ee2; }
.alert-icon-warning { fill: #c69026; }
.alert-icon-caution { fill: #e5534b; }

/* ==================== 代码块 ==================== */
pre.code__pre,
.hljs.code__pre {
  font-size: 90%;
  overflow-x: auto;
  border-radius: 8px;
  padding: 0 !important;
  line-height: 1.5;
  margin: 10px 8px;
  background: #282c34;
  color: #abb2bf;
}

pre.code__pre > code,
.hljs.code__pre > code {
  display: block;
  padding: 0.5em 1em 1em;
  overflow-x: auto;
  color: inherit;
  background: none;
  white-space: pre;
}

/* ==================== 图片 ==================== */
img {
  display: block;
  max-width: 100%;
  margin: 0.1em auto 0.5em;
  border-radius: 4px;
}

/* ==================== 列表 ==================== */
ol {
  padding-left: 1em;
  margin-left: 0;
  color: #333;
}

ul {
  list-style: circle;
  padding-left: 1em;
  margin-left: 0;
  color: #333;
}

li {
  display: block;
  margin: 0.2em 8px;
  color: #333;
}

/* ==================== 脚注 ==================== */
p.footnotes {
  margin: 0.5em 8px;
  font-size: 80%;
  color: #333;
}

/* ==================== 图表 ==================== */
figure {
  margin: 1.5em 8px;
  color: #333;
}

figcaption,
.md-figcaption {
  text-align: center;
  color: #888;
  font-size: 0.8em;
}

/* ==================== 分隔线 ==================== */
hr {
  border-style: solid;
  border-width: 2px 0 0;
  border-color: rgba(0, 0, 0, 0.1);
  transform: scale(1, 0.5);
  height: 0.4em;
  margin: 1.5em 0;
}

/* ==================== 行内代码 ==================== */
code {
  font-size: 90%;
  color: #d14;
  background: rgba(27, 31, 35, 0.05);
  padding: 3px 5px;
  border-radius: 4px;
}

/* ==================== 强调 ==================== */
em {
  font-style: italic;
  font-size: inherit;
}

/* ==================== 链接 ==================== */
a {
  color: #576b95;
  text-decoration: none;
}

/* ==================== 粗体 ==================== */
strong {
  color: var(--md-primary-color);
  font-weight: bold;
  font-size: inherit;
}

/* ==================== 表格 ==================== */
table {
  color: #333;
}

thead {
  font-weight: bold;
  color: #333;
}

th {
  border: 1px solid #dfdfdf;
  padding: 0.25em 0.5em;
  color: #333;
  word-break: keep-all;
  background: rgba(0, 0, 0, 0.05);
}

td {
  border: 1px solid #dfdfdf;
  padding: 0.25em 0.5em;
  color: #333;
  word-break: keep-all;
}

/* ==================== KaTeX 公式 ==================== */
.katex-inline {
  max-width: 100%;
  overflow-x: auto;
}

.katex-block {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5em 0;
  text-align: center;
}

/* ==================== 标记高亮 ==================== */
.markup-highlight {
  background-color: var(--md-primary-color);
  padding: 2px 4px;
  border-radius: 2px;
  color: #fff;
}

.markup-underline {
  text-decoration: underline;
  text-decoration-color: var(--md-primary-color);
}

.markup-wavyline {
  text-decoration: underline wavy;
  text-decoration-color: var(--md-primary-color);
  text-decoration-thickness: 2px;
}


path: assets/themes/grace.css
content: /**
 * MD 优雅主题 (@brzhang)
 * 
 * 特点：
 * - 优雅的阴影和圆角效果
 * - 斜体引用块
 * - 渐变分隔线
 * - 精致的表格样式
 * - 适合散文、游记、生活方式类文章
 */

/* ==================== 标题样式 ==================== */
h1 {
  padding: 0.5em 1em;
  border-bottom: 2px solid var(--md-primary-color);
  font-size: calc(var(--md-font-size) * 1.4);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  margin: 1.5em auto;
  text-align: center;
  display: table;
}

h2 {
  padding: 0.3em 1em;
  border-radius: 8px;
  font-size: calc(var(--md-font-size) * 1.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
  background: var(--md-primary-color);
  margin: 1.5em auto;
  text-align: center;
  display: table;
}

h3 {
  padding: 0.5em 0 0.5em 12px;
  font-size: calc(var(--md-font-size) * 1.2);
  border-left: 4px solid var(--md-primary-color);
  border-bottom: 1px dashed var(--md-primary-color);
  margin: 1.5em 8px 0.75em 0;
}

h4 {
  font-size: calc(var(--md-font-size) * 1.1);
  color: var(--md-primary-color);
}

h5 {
  font-size: var(--md-font-size);
  color: var(--md-primary-color);
}

h6 {
  font-size: var(--md-font-size);
  color: #666;
}

/* ==================== 引用块 ==================== */
blockquote {
  font-style: italic;
  padding: 1em 1em 1em 2em;
  border-left: 4px solid var(--md-primary-color);
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 1em;
  background: #fafafa;
}

.markdown-alert {
  font-style: italic;
}

/* ==================== 代码块 ==================== */
pre.code__pre,
.hljs.code__pre {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

pre.code__pre > code,
.hljs.code__pre > code {
  font-family: 'Fira Code', Menlo, Operator Mono, Consolas, Monaco, monospace;
}

/* ==================== 图片 ==================== */
img {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

figcaption,
.md-figcaption {
  text-align: center;
  color: #888;
  font-size: 0.8em;
  font-style: italic;
}

/* ==================== 列表 ==================== */
ol {
  padding-left: 1.5em;
}

ul {
  list-style: none;
  padding-left: 1.5em;
}

ul li::before {
  content: "•";
  color: var(--md-primary-color);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

li {
  margin: 0.5em 8px;
}

/* ==================== 分隔线 ==================== */
hr {
  height: 1px;
  border: none;
  margin: 2em 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}

/* ==================== 表格 ==================== */
table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  margin: 1em 8px;
  color: #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

thead {
  color: #fff;
  background: var(--md-primary-color);
}

th {
  border: none;
  background: var(--md-primary-color);
  color: #fff;
}

td {
  padding: 0.5em 1em;
  border-bottom: 1px solid #eee;
}

tr:last-child td {
  border-bottom: none;
}

/* ==================== 强调 ==================== */
em {
  font-style: italic;
  font-size: inherit;
}

/* ==================== 链接 ==================== */
a {
  color: #576b95;
  text-decoration: none;
  border-bottom: 1px dashed #576b95;
}

a:hover {
  border-bottom-style: solid;
}


path: assets/themes/simple.css
content: /**
 * MD 简洁主题 (@okooo5km)
 * 
 * 特点：
 * - 极简设计风格
 * - 微妙的边框和阴影
 * - 不规则圆角标题
 * - 柔和的视觉效果
 * - 适合科技资讯、产品介绍、简洁报告
 */

/* ==================== 标题样式 ==================== */
h1 {
  padding: 0.5em 1em;
  font-size: calc(var(--md-font-size) * 1.4);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
  margin: 1.5em auto;
  text-align: center;
  display: table;
}

h2 {
  padding: 0.3em 1.2em;
  font-size: calc(var(--md-font-size) * 1.3);
  border-radius: 8px 24px 8px 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  color: #fff;
  background: var(--md-primary-color);
  margin: 1.5em auto;
  text-align: center;
  display: table;
}

h3 {
  padding: 0.5em 12px;
  font-size: calc(var(--md-font-size) * 1.2);
  border-radius: 6px;
  line-height: 1.8;
  border-left: 4px solid var(--md-primary-color);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(0, 0, 0, 0.02);
  margin: 1.5em 8px 0.75em 0;
}

h4 {
  font-size: calc(var(--md-font-size) * 1.1);
  border-radius: 6px;
  color: var(--md-primary-color);
}

h5 {
  font-size: var(--md-font-size);
  border-radius: 6px;
  color: var(--md-primary-color);
}

h6 {
  font-size: var(--md-font-size);
  border-radius: 6px;
  color: #666;
}

/* ==================== 引用块 ==================== */
blockquote {
  font-style: italic;
  padding: 1em 1em 1em 2em;
  color: rgba(0, 0, 0, 0.6);
  border-bottom: 0.2px solid rgba(0, 0, 0, 0.04);
  border-top: 0.2px solid rgba(0, 0, 0, 0.04);
  border-right: 0.2px solid rgba(0, 0, 0, 0.04);
  border-left: 4px solid var(--md-primary-color);
  border-radius: 6px;
  background: #fafafa;
}

/* GFM Alert 样式覆盖 */
.markdown-alert-note,
.markdown-alert-tip,
.markdown-alert-info,
.markdown-alert-important,
.markdown-alert-warning,
.markdown-alert-caution {
  font-style: italic;
}

/* ==================== 代码块 ==================== */
pre.code__pre,
.hljs.code__pre {
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}

pre.code__pre > code,
.hljs.code__pre > code {
  font-family: 'Fira Code', Menlo, Operator Mono, Consolas, Monaco, monospace;
}

/* ==================== 图片 ==================== */
img {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

figcaption,
.md-figcaption {
  text-align: center;
  color: #888;
  font-size: 0.8em;
}

/* ==================== 列表 ==================== */
ol {
  padding-left: 1.5em;
}

ul {
  list-style: none;
  padding-left: 1.5em;
}

ul li::before {
  content: "◦";
  color: var(--md-primary-color);
  font-size: 1.2em;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

li {
  margin: 0.5em 8px;
}

/* ==================== 分隔线 ==================== */
hr {
  height: 1px;
  border: none;
  margin: 2em 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

/* ==================== 表格 ==================== */
table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

th {
  background: rgba(0, 0, 0, 0.03);
}

td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ==================== 强调 ==================== */
em {
  font-style: italic;
  font-size: inherit;
}

/* ==================== 链接 ==================== */
a {
  color: #576b95;
  text-decoration: none;
}

/* ==================== 行内代码 ==================== */
code {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}


path: clawhub.json
content: {
  "name": "md-wechat",
  "version": "2.0.1",
  "description": "将 Markdown 文档转换为微信公众号格式的排版工具。支持自定义主题、字体、颜色、代码高亮等配置，支持配置提取与复用。",
  "author": "italks",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/italks/md-wechat.git"
  },
  "keywords": [
    "markdown",
    "wechat",
    "公众号",
    "排版",
    "微信编辑器",
    "格式转换",
    "KaTeX",
    "Mermaid",
    "代码高亮"
  ],
  "categories": [
    "document",
    "conversion",
    "wechat"
  ],
  "tags": [
    "markdown-to-html",
    "wechat-official-account",
    "document-formatting",
    "cli-tool"
  ],
  "engines": {
    "node": ">=18.0.0"
  },
  "files": [
    "scripts/",
    "assets/",
    "references/",
    "md-config.json",
    "skill.md"
  ],
  "main": "scripts/convert.js"
}


path: md-config.json
content: {
  "version": "1.0.0",
  "theme": {
    "name": "default"
  },
  "style": {
    "fontFamily": "-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif",
    "fontSize": "16px",
    "primaryColor": "#0F4C81"
  },
  "codeBlock": {
    "themeUrl": "https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlightjs/11.11.1/styles/atom-one-dark.min.css",
    "themeName": "atom-one-dark",
    "isMacStyle": true,
    "showLineNumber": false
  },
  "image": {
    "legend": "alt-title"
  },
  "link": {
    "citeStatus": false
  },
  "content": {
    "countStatus": true,
    "useIndent": false,
    "useJustify": false
  },
  "headingStyles": {
    "h1": "default",
    "h2": "default",
    "h3": "default",
    "h4": "default",
    "h5": "default",
    "h6": "default"
  },
  "customCSS": ""
}


path: package.json
content: {
  "name": "md-wechat",
  "version": "2.0.1",
  "description": "Markdown to WeChat Official Account HTML converter",
  "main": "scripts/convert.js",
  "type": "module",
  "bin": {
    "md-wechat": "./scripts/convert.js"
  },
  "scripts": {
    "convert": "node scripts/convert.js",
    "test": "node scripts/convert.js example.md -o example-test.html"
  },
  "dependencies": {
    "chalk": "^5.6.2",
    "commander": "^12.1.0",
    "highlight.js": "^11.11.1",
    "html-minifier-terser": "^7.2.0",
    "juice": "^10.0.1",
    "katex": "^0.16.38",
    "marked": "^12.0.2",
    "marked-highlight": "^2.2.3",
    "puppeteer": "^22.0.0"
  },
  "engines": {
    "node": ">=18.0.0"
  },
  "keywords": [
    "markdown",
    "wechat",
    "converter",
    "html"
  ],
  "author": "",
  "license": "MIT"
}


path: references/config-reference.md
content: # 配置项参考

本文档详细说明 `md-config.json` 配置文件中的所有配置项。

## 配置文件结构

```json
{
  "version": "1.0.0",
  "theme": { ... },
  "style": { ... },
  "codeBlock": { ... },
  "image": { ... },
  "link": { ... },
  "content": { ... },
  "headingStyles": { ... },
  "customCSS": ""
}
```

---

## 主题配置 (theme)

### theme.name

预设主题名称。

| 值 | 说明 | 适用场景 |
|---|------|---------|
| `default` | 经典主题 | 技术文章、教程、文档 |
| `grace` | 优雅主题 | 散文、游记、生活方式 |
| `simple` | 简洁主题 | 科技资讯、产品介绍、报告 |

```json
{
  "theme": {
    "name": "default"
  }
}
```

---

## 样式配置 (style)

### style.fontFamily

正文字体。

| 字体类型 | 值 | 特点 |
|---------|-----|------|
| 无衬线（推荐） | `-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif` | 现代简洁，适合屏幕阅读 |
| 衬线 | `Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif` | 传统典雅，适合长文阅读 |
| 等宽 | `Menlo, Monaco, 'Courier New', monospace` | 代码风格，适合技术文章 |

```json
{
  "style": {
    "fontFamily": "-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif"
  }
}
```

### style.fontSize

正文字号。

| 值 | 说明 | 适用场景 |
|---|------|---------|
| `14px` | 更小 | 信息密度高的文章 |
| `15px` | 稍小 | 普通文章 |
| `16px` | 推荐（默认） | 大多数场景 |
| `17px` | 稍大 | 适合中老年读者 |
| `18px` | 更大 | 大屏阅读 |

### style.primaryColor

主题色，用于标题、强调、链接等元素。

| 颜色名 | 值 | 气质 |
|-------|-----|------|
| 经典蓝 | `#0F4C81` | 稳重冷静 |
| 翡翠绿 | `#009874` | 自然平衡 |
| 活力橘 | `#FA5151` | 热情活力 |
| 柠檬黄 | `#FECE00` | 明亮温暖 |
| 薰衣紫 | `#92617E` | 优雅神秘 |
| 天空蓝 | `#55C9EA` | 清爽自由 |
| 玫瑰金 | `#B76E79` | 奢华现代 |
| 橄榄绿 | `#556B2F` | 沉稳自然 |
| 石墨黑 | `#333333` | 内敛极简 |
| 雾烟灰 | `#A9A9A9` | 柔和低调 |
| 樱花粉 | `#FFB7C5` | 浪漫甜美 |

```json
{
  "style": {
    "primaryColor": "#0F4C81"
  }
}
```

---

## 代码块配置 (codeBlock)

### codeBlock.themeUrl / codeBlock.themeName

代码高亮主题。

**常用主题**：
- `atom-one-dark` - Atom One Dark（默认）
- `atom-one-light` - Atom One Light
- `github` - GitHub 风格
- `github-dark` - GitHub Dark
- `monokai` - Monokai
- `nord` - Nord
- `vs` - Visual Studio
- `vs2015` - Visual Studio 2015 Dark
- `xcode` - Xcode

完整主题列表：
```
1c-light, a11y-dark, a11y-light, agate, an-old-hope, androidstudio,
arduino-light, arta, ascetic, atom-one-dark-reasonable, atom-one-dark,
atom-one-light, brown-paper, codepen-embed, color-brewer, dark, default,
devibeans, docco, far, felipec, foundation, github-dark-dimmed,
github-dark, github, gml, googlecode, gradient-dark, gradient-light,
grayscale, hybrid, idea, intellij-light, ir-black, isbl-editor-dark,
isbl-editor-light, kimbie-dark, kimbie-light, lightfair, lioshi, magula,
mono-blue, monokai-sublime, monokai, night-owl, nnfx-dark, nnfx-light,
nord, obsidian, panda-syntax-dark, panda-syntax-light, paraiso-dark,
paraiso-light, pojoaque, purebasic, qtcreator-dark, qtcreator-light,
rainbow, routeros, school-book, shades-of-purple, srcery,
stackoverflow-dark, stackoverflow-light, sunburst, tokyo-night-dark,
tokyo-night-light, tomorrow-night-blue, tomorrow-night-bright, vs,
vs2015, xcode, xt256
```

```json
{
  "codeBlock": {
    "themeUrl": "https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlightjs/11.11.1/styles/atom-one-dark.min.css",
    "themeName": "atom-one-dark"
  }
}
```

### codeBlock.isMacStyle

是否使用 Mac 风格代码块（带红黄绿三个圆点）。

| 值 | 说明 |
|---|------|
| `true` | 显示 Mac 风格装饰（默认） |
| `false` | 不显示装饰 |

### codeBlock.showLineNumber

是否显示代码行号。

| 值 | 说明 |
|---|------|
| `true` | 显示行号 |
| `false` | 不显示行号（默认） |

---

## 图片配置 (image)

### image.legend

图片图注显示格式。

| 值 | 说明 | 示例 |
|---|------|------|
| `title-alt` | title 优先 | 先显示 title，没有则显示 alt |
| `alt-title` | alt 优先（默认） | 先显示 alt，没有则显示 title |
| `title` | 只显示 title | 仅显示 title 属性 |
| `alt` | 只显示 alt | 仅显示 alt 属性 |
| `none` | 不显示 | 不显示图注 |

```json
{
  "image": {
    "legend": "alt-title"
  }
}
```

---

## 链接配置 (link)

### link.citeStatus

是否在文末添加引用链接列表。

微信公众号不支持外链，开启此选项后，外链会在文末统一列出。

| 值 | 说明 |
|---|------|
| `true` | 添加引用链接 |
| `false` | 不添加（默认） |

```json
{
  "link": {
    "citeStatus": false
  }
}
```

---

## 内容配置 (content)

### content.countStatus

是否显示字数统计和预估阅读时间。

| 值 | 说明 |
|---|------|
| `true` | 在文章开头显示统计信息 |
| `false` | 不显示（默认） |

### content.useIndent

是否开启段落首行缩进（2em）。

| 值 | 说明 |
|---|------|
| `true` | 首行缩进 |
| `false` | 不缩进（默认） |

### content.useJustify

是否开启两端对齐。

| 值 | 说明 |
|---|------|
| `true` | 两端对齐 |
| `false` | 左对齐（默认） |

```json
{
  "content": {
    "countStatus": false,
    "useIndent": false,
    "useJustify": false
  }
}
```

---

## 标题样式配置 (headingStyles)

为每个级别的标题设置独立样式。

### 可选样式

| 值 | 说明 | 效果 |
|---|------|------|
| `default` | 使用主题默认样式 | - |
| `color-only` | 主题色文字 | 标题使用主题色 |
| `border-bottom` | 下边框 | 底部显示主题色边框 |
| `border-left` | 左边框 | 左侧显示主题色边框 |
| `custom` | 自定义 | 使用 customCSS 定义 |

### 配置示例

```json
{
  "headingStyles": {
    "h1": "border-bottom",
    "h2": "color-only",
    "h3": "border-left",
    "h4": "default",
    "h5": "default",
    "h6": "default"
  }
}
```

---

## 自定义 CSS (customCSS)

添加自定义 CSS 样式，可覆盖预设样式。

```json
{
  "customCSS": "h1 { font-size: 2em; }\nblockquote { background: #fffbe6; }"
}
```

### 常用自定义样式示例

**修改引用块背景色**：
```css
blockquote {
  background: #fffbe6;
  border-left-color: #ffc53d;
}
```

**添加图片阴影**：
```css
img {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
```

**修改链接颜色**：
```css
a {
  color: var(--md-primary-color);
  border-bottom: 1px dashed var(--md-primary-color);
}
```

**代码块圆角**：
```css
pre {
  border-radius: 12px;
}
```

---

## 完整配置示例

```json
{
  "version": "1.0.0",
  
  "theme": {
    "name": "default"
  },

  "style": {
    "fontFamily": "-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif",
    "fontSize": "16px",
    "primaryColor": "#0F4C81"
  },

  "codeBlock": {
    "themeUrl": "https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlightjs/11.11.1/styles/atom-one-dark.min.css",
    "themeName": "atom-one-dark",
    "isMacStyle": true,
    "showLineNumber": false
  },

  "image": {
    "legend": "alt-title"
  },

  "link": {
    "citeStatus": false
  },

  "content": {
    "countStatus": false,
    "useIndent": false,
    "useJustify": false
  },

  "headingStyles": {
    "h1": "default",
    "h2": "default",
    "h3": "default",
    "h4": "default",
    "h5": "default",
    "h6": "default"
  },

  "customCSS": ""
}
```

---

## CSS 变量参考

在自定义 CSS 中可使用以下变量：

| 变量名 | 说明 | 默认值 |
|-------|------|-------|
| `--md-primary-color` | 主题色 | `#0F4C81` |
| `--md-font-family` | 字体 | 无衬线字体栈 |
| `--md-font-size` | 字号 | `16px` |

**使用示例**：
```css
.my-custom-class {
  color: var(--md-primary-color);
  font-size: calc(var(--md-font-size) * 1.2);
}
```


path: references/theme-reference.md
content: # 主题样式参考

本文档介绍 md-wechat 支持的三种预设主题及其样式特点。

---

## 主题概览

| 主题 | 名称 | 设计者 | 适用场景 |
|-----|------|--------|---------|
| default | 经典主题 | md 团队 | 技术文章、教程、文档 |
| grace | 优雅主题 | @brzhang | 散文、游记、生活方式 |
| simple | 简洁主题 | @okooo5km | 科技资讯、产品介绍、报告 |

---

## 经典主题 (default)

### 设计理念

经典主题采用传统排版风格，层次分明，适合技术类文章。二级标题使用主题色背景突出显示，三级标题使用左侧边框强调。

### 样式特点

**标题样式**：
- H1：居中显示，底部主题色边框
- H2：居中显示，主题色背景白字
- H3：左侧主题色边框
- H4-H6：主题色文字

**代码块**：
- 深色背景（#282c34）
- Mac 风格装饰（红黄绿圆点）
- 圆角边框

**引用块**：
- 浅灰背景
- 左侧主题色边框
- 圆角设计

**列表**：
- 无序列表使用空心圆点
- 有序列表使用数字

### CSS 关键代码

```css
/* 二级标题 - 主题色背景 */
h2 {
  display: table;
  padding: 0.3em 1em;
  margin: 2em auto 1em;
  color: #fff;
  background: var(--md-primary-color);
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}

/* 三级标题 - 左边框 */
h3 {
  padding-left: 8px;
  border-left: 3px solid var(--md-primary-color);
  margin: 1.5em 8px 0.75em 0;
}
```

### 效果预览

```
┌─────────────────────────────────────┐
│           一级标题                   │  ← 底部边框
├─────────────────────────────────────┤
│           【二级标题】               │  ← 主题色背景
├─────────────────────────────────────┤
│  ▌三级标题                          │  ← 左边框
│                                     │
│  正文内容，段落之间有适当间距。      │
│                                     │
│  ● 列表项一                         │
│  ● 列表项二                         │
└─────────────────────────────────────┘
```

---

## 优雅主题 (grace)

### 设计理念

优雅主题由 @brzhang 设计，注重视觉美感，使用阴影和圆角营造精致感，适合散文、游记等生活类文章。

### 样式特点

**标题样式**：
- H1：底部边框 + 文字阴影
- H2：主题色背景 + 阴影效果
- H3：左边框 + 底部虚线边框

**代码块**：
- 内嵌阴影效果
- 推荐使用 Fira Code 字体

**引用块**：
- 斜体文字
- 阴影效果
- 圆角设计

**图片**：
- 圆角边框
- 阴影效果

**分隔线**：
- 渐变效果（中间深两端浅）

**表格**：
- 分离边框
- 圆角设计
- 阴影效果
- 表头主题色背景

### CSS 关键代码

```css
/* 二级标题 - 阴影效果 */
h2 {
  padding: 0.3em 1em;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 三级标题 - 虚线边框 */
h3 {
  border-left: 4px solid var(--md-primary-color);
  border-bottom: 1px dashed var(--md-primary-color);
}

/* 引用块 - 斜体 + 阴影 */
blockquote {
  font-style: italic;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* 分隔线 - 渐变 */
hr {
  background: linear-gradient(to right, 
    rgba(0, 0, 0, 0), 
    rgba(0, 0, 0, 0.15), 
    rgba(0, 0, 0, 0));
}
```

### 效果预览

```
┌─────────────────────────────────────┐
│           一级标题                   │  ← 底部边框 + 阴影
├─────────────────────────────────────┤
│           【二级标题】               │  ← 圆角 + 阴影
├─────────────────────────────────────┤
│  ▌三级标题                          │  ← 左边框 + 虚线底
│  ───────────────                    │
│                                     │
│  "引用块使用斜体样式                 │  ← 斜体 + 阴影
│   更加优雅动人"                      │
│                                     │
│  ──────── 渐变分隔线 ────────       │
└─────────────────────────────────────┘
```

---

## 简洁主题 (simple)

### 设计理念

简洁主题由 @okooo5km 设计，追求极简风格，使用微妙的边框和阴影，视觉效果干净清爽，适合科技资讯和产品介绍。

### 样式特点

**标题样式**：
- H1：简洁无装饰
- H2：不规则圆角（8px 24px 8px 24px）
- H3：左边框 + 浅色背景框

**代码块**：
- 细边框
- 浅灰背景

**引用块**：
- 斜体文字
- 微妙的四边边框
- 浅灰背景

**图片**：
- 圆角
- 细边框

**列表**：
- 无序列表使用空心圆点（◦）
- 无实心圆点

### CSS 关键代码

```css
/* 二级标题 - 不规则圆角 */
h2 {
  border-radius: 8px 24px 8px 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* 三级标题 - 背景框 */
h3 {
  border-left: 4px solid var(--md-primary-color);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(0, 0, 0, 0.02);
}

/* 引用块 - 微妙边框 */
blockquote {
  border-bottom: 0.2px solid rgba(0, 0, 0, 0.04);
  border-top: 0.2px solid rgba(0, 0, 0, 0.04);
  border-right: 0.2px solid rgba(0, 0, 0, 0.04);
}

/* 列表项 - 空心圆点 */
ul li::before {
  content: "◦";
  color: var(--md-primary-color);
}
```

### 效果预览

```
┌─────────────────────────────────────┐
│           一级标题                   │  ← 简洁无装饰
├─────────────────────────────────────┤
│         ╭──────────────╮            │
│         │  二级标题    │            │  ← 不规则圆角
│         ╰──────────────╯            │
├─────────────────────────────────────┤
│  ┌───────────────────────┐          │
│  │ ▌三级标题             │          │  ← 背景框
│  └───────────────────────┘          │
│                                     │
│  ◦ 列表项使用空心圆点                │  ← ◦ 符号
└─────────────────────────────────────┘
```

---

## 主题对比

| 特性 | 经典 | 优雅 | 简洁 |
|-----|------|------|------|
| H2 样式 | 主题色背景 | 主题色背景 + 阴影 | 不规则圆角 |
| H3 样式 | 左边框 | 左边框 + 虚线底 | 背景框 |
| 引用块 | 正体 | 斜体 | 斜体 |
| 代码块 | 深色 + Mac装饰 | 内嵌阴影 | 细边框 |
| 图片 | 无装饰 | 圆角 + 阴影 | 圆角 + 细边框 |
| 分隔线 | 实线 | 渐变 | 渐变 |
| 表格 | 合并边框 | 分离 + 圆角 + 阴影 | 细边框 |
| 列表符号 | ● | • | ◦ |

---

## 如何选择主题

### 按文章类型选择

| 文章类型 | 推荐主题 | 原因 |
|---------|---------|------|
| 技术教程 | 经典 | 代码块突出，层次清晰 |
| 编程笔记 | 经典 | 结构化强，信息密度高 |
| 散文游记 | 优雅 | 视觉柔和，阅读舒适 |
| 生活方式 | 优雅 | 美观精致，符合调性 |
| 科技资讯 | 简洁 | 干净利落，信息优先 |
| 产品介绍 | 简洁 | 现代简约，专业感强 |
| 学术报告 | 经典 | 正式规范，结构清晰 |

### 按受众选择

| 目标读者 | 推荐主题 | 建议 |
|---------|---------|------|
| 程序员 | 经典 | 代码高亮，技术感强 |
| 普通读者 | 优雅 | 阅读体验好，不累眼 |
| 年轻群体 | 简洁 | 设计现代，符合审美 |
| 商务人士 | 经典/简洁 | 专业正式 |

---

## 自定义主题

如果预设主题不能满足需求，可以通过以下方式自定义：

### 方法一：修改配置

```json
{
  "theme": { "name": "default" },
  "style": {
    "primaryColor": "#009874",
    "fontSize": "17px"
  },
  "headingStyles": {
    "h1": "border-bottom",
    "h2": "color-only",
    "h3": "border-left"
  }
}
```

### 方法二：添加自定义 CSS

```json
{
  "customCSS": "
    blockquote {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      border: none;
    }
    
    h2 {
      background: linear-gradient(90deg, #667eea, #764ba2);
    }
  "
}
```

### 方法三：创建新主题

1. 在 `assets/themes/` 目录创建新 CSS 文件
2. 修改 `convert.py` 中的 `THEME_MAP` 添加新主题
3. 在配置中使用新主题名称

---

## CSS 变量

所有主题共用以下 CSS 变量，可通过配置修改：

```css
:root {
  --md-primary-color: #0F4C81;  /* 主题色 */
  --md-font-family: ...;         /* 字体 */
  --md-font-size: 16px;          /* 字号 */
}
```

在主题 CSS 中使用：

```css
h2 {
  background: var(--md-primary-color);
  font-size: calc(var(--md-font-size) * 1.2);
}
```


Security scan verdicts — ClawScan: suspicious | static analysis: suspicious | VirusTotal: clean | SkillSpector: suspicious (CRITICAL)