Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Baoyu Markdown to HTML

Converts Markdown into styled, inline-CSS HTML that is ready to paste into WeChat and other publishing platforms.

Content & WritingIntermediate★ 26,102⑂ 2,884AI score 9/10Last updated: Sep 10, 2026

What it does

  • Turns a Markdown file into HTML with inline CSS, so styling survives pasting into the WeChat Official Account editor and similar CMSs.
  • Ships 4 themes (default, grace, simple, modern), 13 preset accent colors, plus font family and font size options.
  • Handles syntax-highlighted code, math, footnotes, GitHub-style alerts (> [!NOTE]), tables, ruby text, and PlantUML.
  • Renders mermaid blocks to cached PNG images via headless Chrome, with a graceful <pre class="mermaid"> fallback when Chrome is missing.
  • Optional --cite mode converts ordinary external links into numbered superscripts with a bottom 引用链接 reference list (a WeChat link-restriction workaround).
  • Output lands next to the source file, and any existing HTML is backed up with a timestamp.

Who it's for

  • Content creators publishing Markdown drafts to WeChat, blogs, or newsletters
  • Developers and technical writers who need good-looking docs with diagrams and code
  • Teams that must convert repeatedly with a consistent house style

Examples

  1. "Convert article.md to HTML using the grace theme" → elegant card-style output
  2. "Use the modern theme in red and move external links to bottom citations" → runs --theme modern --color red --cite
  3. A technical doc with Mermaid flowcharts → diagrams are baked into PNGs so they display correctly on WeChat

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/JimLiu/baoyu-skills/HEAD/skills/baoyu-markdown-to-html/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/baoyu-markdown-to-html folder from the GitHub repo JimLiu/baoyu-skills into my ~/.claude/skills/baoyu-markdown-to-html/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/JimLiu/baoyu-skills.git /tmp/baoyu-skills && mkdir -p ~/.claude/skills && cp -r /tmp/baoyu-skills/skills/baoyu-markdown-to-html ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and check bun --version. If bun isn't installed, having npx (bundled with Node.js) is enough. To render Mermaid diagrams as images you also need Chrome, Chromium, or Edge.
  2. Clone the repo: git clone https://github.com/JimLiu/baoyu-skills.git /tmp/baoyu-skills
  3. Copy the skill folder: mkdir -p ~/.claude/skills && cp -r /tmp/baoyu-skills/skills/baoyu-markdown-to-html ~/.claude/skills/
  4. Restart Claude Code.
  5. Ask something like "convert article.md to HTML" and the skill will trigger automatically.
  6. (Optional) Create ~/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md with a line such as default_theme: grace so you aren't asked for a theme each time.
View source on GitHub ↗License: MIT