Skip to content
Get packs

Guide · Agent skill

How to use the Markdown to HTML Converter agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The Markdown to HTML Converter is an agent skill from the baoyu-skills collection that turns a Markdown file into a styled HTML file with inline CSS, aimed mainly at WeChat Official Account articles. This guide explains what the skill does, how to install it, how to ask an agent for a conversion, and what to check before running it. You do not need prior experience with agent skills to follow it.

Markdown to HTML ConverterJimLiu/baoyu-skills · MIT

Quick start

  1. 1Download the ZIP. Get the skill ZIP from the page where you found this guide.
  2. 2Unzip into a skills folder. Extract it into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project.
  3. 3Install the runtime. Make sure bun is installed, or that npx is available so the skill can run bun through npx.
  4. 4Install Chrome for diagrams. Have headless Chrome or Chromium available if your Markdown includes Mermaid blocks.
  5. 5Ask for a conversion. Tell the agent to convert your Markdown file to HTML, naming a theme if you have one in mind.
  6. 6Open the output. Find the HTML file beside your input and check the result, including any backup the script created.

What is an agent skill, and what does this one do?

An agent skill is a folder containing a SKILL.md instruction file and optional scripts that an AI agent can load when a task matches the skill's description. This skill, named baoyu-markdown-to-html, tells the agent how to convert a Markdown document into a self-contained HTML file.

The output is HTML with inline styling, so the formatting travels with the content when pasted or published. The skill offers several built-in themes (default, grace, simple, modern) and a set of colour presets.

  • Code highlighting, math, footnotes and alert boxes
  • Mermaid diagrams rendered to PNG images via headless Chrome
  • PlantUML diagram support
  • Optional bottom citations, which turn ordinary external links into numbered references collected under a 引用链接 section
  • Infographic support, as listed in the skill description

Install the skill (ZIP download or Claude apps upload)

Option 1: download the skill ZIP from the page where you found this guide, then unzip it into your personal skills folder ~/.claude/skills/ so it is available in every project. To limit it to one project, unzip it into that project's .claude/skills/ folder instead.

Option 2: in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

~/.claude/skills/

Check the requirements before you run it

The skill runs a TypeScript script through Bun. The skill's metadata accepts either bun or npx as the runner: if bun is installed, it is used directly; if npx is available, the skill runs bun through npx -y bun; otherwise the agent is told to suggest installing bun.

Mermaid diagrams need headless Chrome or Chromium, because they are rendered to PNG. The script also depends on the Node packages baoyu-md and baoyu-chrome-cdp, which are declared in scripts/package.json.

  • Bun runtime, or npx to run bun
  • Headless Chrome or Chromium for Mermaid PNG rendering
  • Node packages baoyu-md and baoyu-chrome-cdp (listed in scripts/package.json)

Trigger the skill with natural requests

You do not need to type a command. Ask the agent in plain language, and the skill loads when your request matches its description. Phrases the skill is written to match include "markdown to html", "convert md to html", "md 转 html", "微信外链转底部引用", or any request for styled HTML output from Markdown.

If you do not name a theme and no default is saved in an EXTEND.md preferences file, the agent will ask you to choose one from the theme list.

  • "Convert article.md to HTML using the grace theme."
  • "Convert my md to html and turn external links into bottom citations."
  • "Make styled HTML from notes.md with the modern theme and red colour."

Run the conversion yourself (command reference)

You can also run the script directly. Replace the placeholder path with the skill's real folder. The output HTML is written next to your input file, with the same base name.

Useful options include --theme, --color, --font-size, --title, --cite, --keep-title and the Mermaid options --mermaid-theme, --mermaid-scale, --mermaid-width, --mermaid-bg and --no-mermaid, which skips PNG rendering and emits a fallback block instead.

  • If article.html already exists, it is backed up first as article.html.bak-YYYYMMDDHHMMSS
  • Mermaid PNGs are cached in imgs/.mermaid-cache/ and reused when the code, theme and settings are unchanged
  • Preferences can be stored in EXTEND.md (project, XDG config or home folder) for a default theme and Mermaid settings
${BUN_X} {baseDir}/scripts/main.ts article.md --theme modern --color red

Safety notes: scripts and network use

This skill runs scripts and uses the network. The script runs locally on your files, and Mermaid rendering launches a headless Chrome browser. The source lists network use as a requirement, so review the code in scripts/main.ts before running it on confidential material.

Test coverage ships as scripts/main.test.ts, and the package file is scripts/package.json. Read these if you want to understand what will run on your machine.

  • Do not run it on sensitive documents until you have reviewed the code
  • Mermaid rendering starts a headless browser
  • The skill is MIT licensed

What people use it for

  • Preparing a long article in Markdown and converting it to WeChat-friendly inline-styled HTML
  • Turning Markdown posts into consistently styled pages with a chosen theme and colour
  • Rendering Mermaid flowcharts as PNG images inside an HTML article
  • Converting external links into numbered bottom citations for a reference list

Frequently asked questions

How do I install the baoyu-markdown-to-html skill?

Download the skill ZIP from the page where you found this guide and unzip it into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings, Capabilities, Skills.

What does the Markdown to HTML skill need to run?

It needs the Bun runtime, or npx to run bun. Mermaid diagram rendering also needs headless Chrome or Chromium, and the Node packages baoyu-md and baoyu-chrome-cdp declared in scripts/package.json.

Is the markdown to HTML skill free?

The skill is published under the MIT licence, as stated in the source. Check the licence file in the repository for the full terms.

Can it convert Markdown to HTML without Chrome?

Yes, if you run the script with --no-mermaid. This skips Mermaid PNG rendering and emits a pre class mermaid fallback instead, so Chrome is not needed for that step.

Does it work with WeChat Official Account articles?

That is its main target. The skill produces inline-styled HTML optimised for WeChat Official Account and similar platforms, and the --cite option handles external links as bottom citations, while mp.weixin.qq.com links stay as direct links.

Is it safe to use on private documents?

Review it first. The script runs locally on your files and Mermaid rendering launches headless Chrome, and the skill uses the network. For confidential material, read scripts/main.ts before running it.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Choose this skill if you publish long Markdown articles, especially for WeChat Official Accounts, and want consistent inline styling with diagrams rendered as images. If you only need plain Markdown or a simple HTML export, skip it, because Bun and Chrome add setup weight you do not need.

Download the skill