Home / All Skills / Content & Media Creation / canghe-markdown-to-html
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · freestylefly/canghe-skills

canghe-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.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Author freestyleflyGitHub freestylefly/canghe-skills ↗License MIT（仓库根 LICENSE）Commit dd0bf35595
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Prompt orchestration + single-script execution: SKILL.md instructs the agent to treat its own directory as SKILL_DIR, delegating the actual conversion to a Bun/TypeScript script scripts/main.ts.

skills/canghe-markdown-to-html/SKILL.md
**Agent Execution**: Determine this SKILL.md directory as `SKILL_DIR`, then use `${SKILL_DIR}/scripts/<name>.ts`.
What is happening here: SKILL.md solely handles routing and workflow; the actual parsing/rendering logic resides in the script. The agent locates the path and invokes it via npx bun.

The conversion command executes the local script on the fly via npx -y bun and supports options such as --theme / --title / --keep-title.

skills/canghe-markdown-to-html/SKILL.md
npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme>
What is happening here: The execution command provided in Step 2; npx -y fetches the bun runtime on the fly rather than using a pinned version (supply chain aspect).

The implementation stack is exposed via its dependency manifest: marked for parsing, highlight.js for syntax highlighting, juice for inlining CSS, and front-matter for metadata extraction.

skills/canghe-markdown-to-html/scripts/md/package.json
"juice": "^11.0.1", "marked": "^15.0.6", "reading-time": "^1.5.0",
What is happening here: juice inlining CSS is critical for WeChat article styling; marked handles Markdown→HTML conversion; highlight.js provides code syntax highlighting.

Themes are implemented via CSS variables + theme files; the default theme defines typography for headings, blockquotes, code blocks, tables, etc. (e.g., centered white text on colored background for H2 headings).

skills/canghe-markdown-to-html/scripts/md/themes/default.css
h2 { display: table; padding: 0 0.2em; margin: 4em auto 2em; color: #fff; background: var(--md-primary-color);
What is happening here: Colors use var(--md-primary-color) for easy overriding via EXTEND.md; themes only modify styling without changing the document structure.

A three-tier external preference mechanism: project-level .canghe-skills/... takes precedence, followed by $HOME/.canghe-skills/..., supporting default themes, custom CSS variables, and code block styles.

skills/canghe-markdown-to-html/SKILL.md
**EXTEND.md Supports**: Default theme | Custom CSS variables | Code block style
What is happening here: User preferences are stored as files read by the skill; the agent probes for their existence using Bash before deciding whether to apply them.

Output and conflict handling: HTML is saved in the same directory as the input; if it already exists, it is backed up as .bak-YYYYMMDDHHMMSS first, and a JSON containing image placeholders is printed to stdout for downstream replacement.

skills/canghe-markdown-to-html/SKILL.md
**Conflict handling**: If HTML file already exists, it will be backed up first:
What is happening here: The script writes to disk locally and backs up before overwriting; the contentImages MDTOHTMLIMGPH_n placeholder mechanism is used by downstream tools like post-to-wechat for image insertion.

Chinese pre-processing: Only when the input contains CJK characters, if canghe-format-markdown is detected, it asks the user whether to format first (e.g., fixing ** corrupted by punctuation).

skills/canghe-markdown-to-html/SKILL.md
**Condition**: Only execute if input file contains Chinese text.
What is happening here: Cross-skill delegation in Step 0 explicitly invoking canghe-format-markdown; this is an external skill behavior and is not factored into this skill's risk rating.

Optional PlantUML rendering transmits diagram source code to a public server (default: www.plantuml.com), which is the sole outbound egress path at runtime.

skills/canghe-markdown-to-html/scripts/md/extensions/plantuml.ts
* @default 'https://www.plantuml.com/plantuml'
What is happening here: The plantuml extension's default serverUrl points to a public rendering service; risk scanning also identified fetch(svgUrl) at plantuml.ts:193 where the image is actually retrieved.

2Core Capabilities

01Markdown → inlined-style HTML conversion (optimized for WeChat Official Accounts)
02Code block syntax highlighting (highlight.js)
03Three WeChat-compatible themes: default / grace / simple
04Math formulas (KaTeX), PlantUML, and Mermaid diagram support
05GFM alert blocks, footnotes, ruby annotations, and other syntax extensions
06Outputs image placeholder JSON (MDTOHTMLIMGPH_n) for downstream image insertion workflows
07Same-directory output + automatic backup before overwriting + stdout JSON report
08Externalized preferences (EXTEND.md themes / CSS variables / code block styles) and Chinese pre-formatting delegation

3External Dependencies

KindDependency / Endpoint
clibun（经 npx -y 即时拉取）
apiPlantUML 公共渲染服务（图表源码外发）
packagemarked（Markdown 解析）
packagejuice（CSS 内联化）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Execute local script or command: npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme> (age
  • 网络端点: Declare external network access: PlantUML rendering: sends GET to https://www.plantuml.com/plantuml to fetch SVG (diagram source code transmitted externally), only when document contains p
  • 本地工作目录: File read/write & artifact output: Writes <name>.html in the same directory as input (backed up as .bak-YYYYMMDDHHMMSS before overwriting)
Audit Notes: 1. Evaluation scope = this skill directory (SKILL.md + scripts/main.ts + scripts/md/*). 2. Internal behavior within the directory = local bun script + local file read/write (writing .html, creating backups), with no credential access, no reverse engineering/impersonation, and no TLS/sandbox downgrading. 3. Key factor for Orange rating = following SKILL.md sends user content outbound to an external backend service: SKILL.md explicitly supports PlantUML, whose extension serverUrl defaults to the public rendering service https://www.plantuml.com/plantuml (diagram source code egress), with risk scanning locating fetch(svgUrl) at plantuml.ts:193. If the document contains neither plantuml blocks nor remote images, the behavior falls back to purely local (Blue level). Cross-skill invocation of canghe-format-markdown is documented in reason only and is not used as a rating basis.

5Second-Pass Verification

  • [ok] 实现原理（SKILL.md 编排 + main.ts 执行） — SKILL.md 的 Script Directory/Workflow 段落自证 agent 只做路由，转换由 scripts/main.ts 承担；执行命令逐字可核。
  • [ok] PlantUML 执行期外发 — plantuml.ts 的 @default 端点与风险扫描 plantuml.ts:193 的 fetch(svgUrl) 相互印证，判橙据成立。
  • [ok] 三套主题存在性 — §1 清单与 §2 内文均含 themes/default.css、grace.css、simple.css，主题描述与 SKILL.md 一致。
  • [ok] 依赖栈 — package.json 列出 marked/highlight.js/juice/front-matter/remark-cjk-friendly 等，与实现原理相符。
  • [ok] 是否存在凭证读取 — 「凭证/环境变量」65 条命中均为 ${SKILL_DIR}/$HOME 路径或示例占位，未发现密钥/cookie 读取，判定为无。
  • [unlocatable] main.ts / render.ts 写盘细节 — bundle 只列清单未展开这两份正文，写盘/备份行为以 SKILL.md 描述与扫描行（main.ts:244、render.ts:868）为据，未代码级复核。
  • [ok] URL 命中性质 — 193 条 URL 命中绝大多数为注释/文档链接与 highlight.js 语言名；真实执行期网络仅 plantuml fetch，未发现被夸大的外发。
  • [ok] 跨 skill 调用 canghe-format-markdown — SKILL.md Step 0 明写条件式调用，属他人 skill 行为，按范式不参与本 skill 判级。

6Verdict & Scenarios

  • Clear separation between orchestration and implementation: SKILL.md only outlines the workflow, while all conversions are performed within a single entry script, making it easy to audit.
  • Solid implementation tailored for WeChat publishing: juice CSS inlining + 3 themes + image placeholders, directly interfacing with WeChat post publishing pipelines.
  • Broad format support leveraging mature libraries: Math, diagrams, footnotes, ruby, alert blocks, and TOC are all handled by included marked extensions.
    • Best for: Content creators and media workflows needing to convert Markdown articles into WeChat-compatible HTML; can also serve as the conversion backend for canghe-post-to-wechat.
    Not for: PlantUML diagrams containing sensitive content (source code will be sent externally); environments requiring strict offline operation or zero external network egress.
    Install Agent-Ready
    ① Verified Mirror 2026-10-10
    Option A · Direct DownloadDownload canghe-markdown-to-html.tar.gz
    sha256: 1c1036babb2494ed…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit dd0bf35595.