Back to Details

baoyu-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

Check project-level first

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

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

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

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

┌──────────────────────────────────────────────────────────────┬───────────────────┐
│                             Path                             │     Location      │
├──────────────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-markdown-to-html/EXTEND.md               │ Project directory │
├──────────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-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/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md" && echo "user"

┌──────────────────────────────────────────────────────────────┬───────────────────┐
│                             路径                             │     位置          │
├──────────────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-markdown-to-html/EXTEND.md               │ 项目目录          │
├──────────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-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 
baoyu-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 
baoyu-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内容且
baoyu-format-markdown
技能可用：
使用
AskUserQuestion
询问是否先进行格式化。格式化可修复以下问题：
  • 标点符号位于粗体标记
    **
    内导致的解析失败
  • CJK与英文之间的空格问题
若用户同意：调用
baoyu-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)

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

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

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

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
优雅主题 - 文字阴影，圆角卡片，精致引用块（作者：@brzhang）
simple
简洁主题 - 现代极简风，不对称圆角，清爽留白（作者：@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进行自定义配置。路径及支持的选项请查看偏好设置章节。