Skip to content
Get packs

Markdown to HTML Converter

Turns Markdown files into styled, WeChat-ready HTML with diagrams and math rendered.

Source Download skill
Repository
JimLiu/baoyu-skills
Stars
27,191
Licence
MIT
Files
4 files

What it does

When installed, the agent can take a Markdown document and convert it into a self-contained HTML file with inline styling, choosing from several built-in themes and colour presets. It handles code highlighting, math, footnotes, alert boxes, and Mermaid or PlantUML diagrams, and can turn external links into numbered bottom citations, a format suited to WeChat Official Account articles. The skill works by running a TypeScript script through Bun, which renders diagrams to PNG images using headless Chrome.

Great for

  • Writers preparing articles for WeChat Official Accounts or other platforms that need inline-styled HTML
  • Developers who want a quick, themed Markdown-to-HTML conversion with diagrams rendered as images
  • Anyone who regularly publishes long Markdown posts and wants consistent styling

Skip it if

  • Users who only need plain Markdown or a simple HTML export with no styling, since the setup of Bun and Chrome adds unnecessary weight
  • Sensitive documents: the script runs locally on your files and Mermaid rendering launches a headless Chrome browser, so review the code before running it on confidential material

Try asking

  • “Convert article.md to HTML using the grace theme with a red colour”
  • “Convert my draft to WeChat-ready HTML and move external links to a bottom citations section”
  • “Turn this Markdown report into styled HTML with Mermaid diagrams rendered as PNG at scale 2”
  • “Convert this md file to html with the modern theme and 17px font”
Step-by-step guide: how to use Markdown to HTML ConverterInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    baoyu-markdown-to-html.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip baoyu-markdown-to-html.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip baoyu-markdown-to-html.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Use --no-mermaid if you do not have Chrome installed or want to skip diagram rendering
  • Set a default theme and colour in an EXTEND.md preferences file so the agent does not need to ask each time
  • Enable --cite only when you explicitly want external links moved to the bottom of the article

What's inside

  • scripts/main.test.ts
  • scripts/main.ts
  • scripts/package.json
  • SKILL.md

Redistributed unmodified from JimLiu/baoyu-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.