Back to Details

canghe-markdown-to-html

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Markdown to HTML Converter

Markdown 转 HTML 转换器

Converts Markdown files to beautifully styled HTML with inline CSS, optimized for WeChat Official Account and other platforms.
将Markdown文件转换为带有内联CSS的精美样式HTML，适配微信公众号及其他平台。

Script Directory

脚本目录

Agent Execution: Determine this SKILL.md directory as 
SKILL_DIR
, then use 
${SKILL_DIR}/scripts/<name>.ts
.
ScriptPurpose
scripts/main.ts
Main entry point
Agent 执行：将当前SKILL.md所在目录设为
SKILL_DIR
，然后使用
${SKILL_DIR}/scripts/<name>.ts
。
脚本用途
scripts/main.ts
主入口文件

Preferences (EXTEND.md)

偏好设置（EXTEND.md）

Use Bash to check EXTEND.md existence (priority order):
bash
undefined
使用Bash检查EXTEND.md的存在性（优先级顺序）：
bash
undefined

Check project-level first

优先检查项目级

test -f .canghe-skills/canghe-markdown-to-html/EXTEND.md && echo "project"
test -f .canghe-skills/canghe-markdown-to-html/EXTEND.md && echo "project"

Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)

然后检查用户级（跨平台：$HOME 在 macOS/Linux/WSL 均适用）

test -f "$HOME/.canghe-skills/canghe-markdown-to-html/EXTEND.md" && echo "user"

┌──────────────────────────────────────────────────────────────┬───────────────────┐
│                             Path                             │     Location      │
├──────────────────────────────────────────────────────────────┼───────────────────┤
│ .canghe-skills/canghe-markdown-to-html/EXTEND.md               │ Project directory │
├──────────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.canghe-skills/canghe-markdown-to-html/EXTEND.md         │ User home         │
└──────────────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│  Result   │                                  Action                                   │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found     │ Read, parse, apply settings                                               │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ Use defaults                                                              │
└───────────┴───────────────────────────────────────────────────────────────────────────┘

**EXTEND.md Supports**: Default theme | Custom CSS variables | Code block style
test -f "$HOME/.canghe-skills/canghe-markdown-to-html/EXTEND.md" && echo "user"

┌──────────────────────────────────────────────────────────────┬───────────────────┐
│ 路径 │ 位置 │
├──────────────────────────────────────────────────────────────┼───────────────────┤
│ .canghe-skills/canghe-markdown-to-html/EXTEND.md │ 项目目录 │
├──────────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.canghe-skills/canghe-markdown-to-html/EXTEND.md │ 用户主目录 │
└──────────────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ 结果 │ 操作 │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ 找到 │ 读取、解析并应用设置 │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ 未找到 │ 使用默认设置 │
└───────────┴───────────────────────────────────────────────────────────────────────────┘

**EXTEND.md 支持**：默认主题 | 自定义CSS变量 | 代码块样式

Workflow

工作流程

Step 0: Pre-check (Chinese Content)

步骤0：预检查（中文内容）

Condition: Only execute if input file contains Chinese text.
Detection:
  1. Read input markdown file
  2. Check if content contains CJK characters (Chinese/Japanese/Korean)
  3. If no CJK content → skip to Step 1
Format Suggestion:
If CJK content detected AND 
canghe-format-markdown
skill is available:
Use 
AskUserQuestion
to ask whether to format first. Formatting can fix:
  • Bold markers with punctuation inside causing 
    **
    parse failures
  • CJK/English spacing issues
If user agrees: Invoke 
canghe-format-markdown
skill to format the file, then use formatted file as input.
If user declines: Continue with original file.
条件：仅当输入文件包含中文文本时执行。
检测流程：
  1. 读取输入的Markdown文件
  2. 检查内容是否包含CJK字符（中/日/韩）
  3. 如果没有CJK内容 → 跳过至步骤1
格式建议：
如果检测到CJK内容且
canghe-format-markdown
技能可用：
使用
AskUserQuestion
询问是否先进行格式化。格式化可修复：
  • 标点符号包含在粗体标记内导致的
    **
    解析失败问题
  • CJK/英文混排的空格问题
如果用户同意：调用
canghe-format-markdown
技能格式化文件，然后使用格式化后的文件作为输入。
如果用户拒绝：继续使用原文件。

Step 1: Confirm Theme

步骤1：确认主题

Before converting, use AskUserQuestion to confirm the theme (unless user already specified):
ThemeDescription
default
(Recommended)		经典主题 - 传统排版，标题居中带底边，二级标题白字彩底
grace
优雅主题 - 文字阴影，圆角卡片，精致引用块
simple
简洁主题 - 现代极简风，不对称圆角，清爽留白
转换前，使用AskUserQuestion确认主题（除非用户已指定）：
主题描述
default
（推荐）		经典主题 - 传统排版，标题居中带底边，二级标题白字彩底
grace
优雅主题 - 文字阴影，圆角卡片，精致引用块
simple
简洁主题 - 现代极简风，不对称圆角，清爽留白

Step 2: Convert

步骤2：转换

bash
npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme>
bash
npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme>

Step 3: Report Result

步骤3：报告结果

Display the output path from JSON result. If backup was created, mention it.
显示JSON结果中的输出路径。如果创建了备份文件，需提及该备份。

Usage

使用方法

bash
npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> [options]
Options:
OptionDescriptionDefault
--theme <name>
Theme name (default, grace, simple)default
--title <title>
Override title from frontmatter
--keep-title
Keep the first heading in contentfalse (removed)
--help
Show help
Examples:
bash
undefined
bash
npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> [options]
选项：
选项说明默认值
--theme <name>
主题名称（default, grace, simple）default
--title <title>
覆盖前置元数据中的标题
--keep-title
保留内容中的第一个标题false（移除）
--help
显示帮助信息
示例：
bash
undefined

Basic conversion (uses default theme, removes first heading)

基础转换（使用默认主题，移除第一个标题）

npx -y bun ${SKILL_DIR}/scripts/main.ts article.md
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md

With specific theme

使用指定主题

npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme grace
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme grace

Keep the first heading in content

保留内容中的第一个标题

npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --keep-title
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --keep-title

Override title

自定义标题

npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --title "My Article"
undefined
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --title "My Article"
undefined

Output

输出

File location: Same directory as input markdown file.
  • Input: 
    /path/to/article.md
  • Output: 
    /path/to/article.html
Conflict handling: If HTML file already exists, it will be backed up first:
  • Backup: 
    /path/to/article.html.bak-YYYYMMDDHHMMSS
JSON output to stdout:
json
{
  "title": "Article Title",
  "author": "Author Name",
  "summary": "Article summary...",
  "htmlPath": "/path/to/article.html",
  "backupPath": "/path/to/article.html.bak-20260128180000",
  "contentImages": [
    {
      "placeholder": "MDTOHTMLIMGPH_1",
      "localPath": "/path/to/img.png",
      "originalPath": "imgs/image.png"
    }
  ]
}
文件位置：与输入Markdown文件同一目录。
  • 输入：
    /path/to/article.md
  • 输出：
    /path/to/article.html
冲突处理：如果HTML文件已存在，会先创建备份：
  • 备份：
    /path/to/article.html.bak-YYYYMMDDHHMMSS
标准输出的JSON结果：
json
{
  "title": "Article Title",
  "author": "Author Name",
  "summary": "Article summary...",
  "htmlPath": "/path/to/article.html",
  "backupPath": "/path/to/article.html.bak-20260128180000",
  "contentImages": [
    {
      "placeholder": "MDTOHTMLIMGPH_1",
      "localPath": "/path/to/img.png",
      "originalPath": "imgs/image.png"
    }
  ]
}

Themes

主题

ThemeDescription
default
经典主题 - 传统排版，标题居中带底边，二级标题白字彩底
grace
优雅主题 - 文字阴影，圆角卡片，精致引用块 (by @brzhang)
simple
简洁主题 - 现代极简风，不对称圆角，清爽留白 (by @okooo5km)
主题描述
default
经典主题 - 传统排版，标题居中带底边，二级标题白字彩底
grace
优雅主题 - 文字阴影，圆角卡片，精致引用块 (by @brzhang)
simple
简洁主题 - 现代极简风，不对称圆角，清爽留白 (by @okooo5km)

Supported Markdown Features

支持的Markdown功能

FeatureSyntax
Headings
# H1
to 
###### H6
Bold/Italic
**bold**
, 
*italic*
Code blocks
```lang
with syntax highlighting
Inline code
`code`
TablesGitHub-flavored markdown tables
Images
![alt](src)
Links
[text](url)
with footnote references
Blockquotes
> quote
Lists
-
unordered, 
1.
ordered
Alerts
> [!NOTE]
, 
> [!WARNING]
, etc.
Footnotes
[^1]
references
Ruby text`{base
Mermaid
```mermaid
diagrams
PlantUML
```plantuml
diagrams
功能语法
标题
# H1
至 
###### H6
粗体/斜体
**bold**
, 
*italic*
代码块
```lang
带语法高亮
行内代码
`code`
表格GitHub风格Markdown表格
图片
![alt](src)
链接
[text](url)
支持脚注引用
引用块
> quote
列表
-
无序列表, 
1.
有序列表
提示框
> [!NOTE]
, 
> [!WARNING]
等
脚注
[^1]
引用
注音文本`{base
Mermaid图
```mermaid
流程图
PlantUML图
```plantuml
图

Frontmatter

前置元数据

Supports YAML frontmatter for metadata:
yaml
---
title: Article Title
author: Author Name
description: Article summary
---
If no title is found, extracts from first H1/H2 heading or uses filename.
支持通过YAML前置元数据设置信息：
yaml
---
title: Article Title
author: Author Name
description: Article summary
---
如果未找到标题，则从第一个H1/H2标题提取，或使用文件名作为标题。

Extension Support

扩展支持

Custom configurations via EXTEND.md. See Preferences section for paths and supported options.
通过EXTEND.md进行自定义配置。详见偏好设置部分的路径及支持选项。