Skip to content
baoyu-markdown-to-html logo

Markdown to HTML Converter

baoyu-markdown-to-html

Converts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, PlantUML, footnotes, alerts, and infographics. Use when user asks for "markdown to html", "convert md to html", "md转html", or needs styled HTML output from markdown.

aiskillstore/marketplace0installs430stars

SKILL.md

Full skill instructions

Markdown to HTML Converter

Converts Markdown files to beautifully styled HTML with inline CSS, optimized for WeChat Official Account and other platforms.

Script Directory

Agent Execution: Determine this SKILL.md directory as SKILL_DIR, then use ${SKILL_DIR}/​scripts/<name>.ts.

ScriptPurpose
scripts/​main.tsMain entry point

Preferences (EXTEND.md)

Use Bash to check EXTEND.md existence (priority order):

# Check project-level first
test -f .baoyu-skills/​baoyu-markdown-to-html/​EXTEND.md && echo "project"

# 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

Workflow

Step 0: Pre-check (Chinese Content)

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.

Step 1: Confirm Theme

Before converting, use AskUserQuestion to confirm the theme (unless user already specified):

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

Step 2: Convert

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

Step 3: Report Result

Display the output path from JSON result. If backup was created, mention it.

Usage

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-titleKeep the first heading in contentfalse (removed)
--helpShow help

Examples:

# Basic conversion (uses default theme, removes first heading)
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

# Keep the first heading in content
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"

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:

{
  "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)

Supported Markdown Features

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

Frontmatter

Supports YAML frontmatter for metadata:

---
title: Article Title
author: Author Name
description: Article summary
---

If no title is found, extracts from first H1/​H2 heading or uses filename.

Extension Support

Custom configurations via EXTEND.md. See Preferences section for paths and supported options.

More skills from aiskillstore

docx logo
aiskillstore/marketplace

docx

Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks

430 216
View
agent-development logo
aiskillstore/marketplace

agent-development

This handles everything around building autonomous agents for Claude Code plugins.

430 197
View
doc-coauthoring logo
aiskillstore/marketplace

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

430 196
View
skill-development logo
aiskillstore/marketplace

skill-development

This is the meta-skill for building skills themselves.

430 196
View
canvas-design logo
aiskillstore/marketplace

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

430 193
View
webapp-testing logo
aiskillstore/marketplace

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

430 191
View
hook-development logo
aiskillstore/marketplace

hook-development

Helps you build event-driven automation for Claude Code using hooks that trigger on tool use, session events, and stop conditions.

430 187
View
algorithmic-art logo
aiskillstore/marketplace

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

430 185
View
command-development logo
aiskillstore/marketplace

command-development

Shows Claude Code how to build slash commands from markdown files, covering the YAML frontmatter options, dynamic arguments with $1/$2...

430 185
View
plugin-structure logo
aiskillstore/marketplace

plugin-structure

This is your reference when scaffolding Claude Code plugins or figuring out why components aren't loading.

430 183
View
skill-installer logo
aiskillstore/marketplace

skill-installer

Install Codex skills into $CODEX_HOME/skills from a curated list or a GitHub repo path. Use when a user asks to list installable skills, install a curated skill, or install a skill from another repo (including private repos).

430 180
View
web-artifacts-builder logo
aiskillstore/marketplace

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

430 177
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View