ドキュメント&知識ベース · JimLiu/baoyu-skills

baoyu-markdown-to-html

Markdown を WeChat(微信)互換テーマを適用したスタイル付き HTML に変換します。コードハイライト、数式、Mermaid(headless Chrome を経由して PNG 出力)、PlantUML、脚注、アラート、インフォグラフィック、外部リンクの末尾引用化(任意)に対応しています。ユーザーが「markdown to html」、「convert md to html」、「md 转 html」、「微信外链转底部引用」を求めている場合、または Markdown からスタイル付き HTML 出力が必要な場合に使用します。

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信ファイル書き込みDual-pass Audit
Author JimLiuGitHub JimLiu/baoyu-skills ↗Stars 25926License MIT(仓库根 LICENSE,Copyright (c) 2026 Jim Liu;GitHub API spdx_id=MIT)Commit 1567581c26
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

本体はローカルの Bun スクリプトおよびリポジトリ内の共有パッケージで構成されています。レンダリングには baoyu-md(marked/juice/highlight.js パイプライン)を使用し、Mermaid 画像出力には baoyu-chrome-cdp の headless Chrome レンダラーを使用します。

skills/baoyu-markdown-to-html/scripts/main.ts
import { closeRenderer, renderMermaidToPng } from "baoyu-chrome-cdp/mermaid";
依存関係は scripts/package.json に宣言され、bun.lock で固定されています(baoyu-md ^0.1.1、baoyu-chrome-cdp ^0.1.1)。スクリプト自体は引数の解析、mermaid の前処理、画像プレースホルダーの書き換え、ファイル書き出し、JSON レポートのみを担当します。

Mermaid コードブロックはローカル PNG(headless Chrome + CDP)としてレンダリングされ、コンテンツハッシュによるキャッシュが行われます。Chrome が存在しない場合やレンダリングに失敗した場合は <pre class="mermaid"> にフォールバックし、変換処理全体が失敗することはありません。

skills/baoyu-markdown-to-html/SKILL.md
Code blocks fenced as ` ```mermaid ` are rendered to PNGs via headless Chrome (CDP) and cached at `imgs/.mermaid-cache/mermaid-<hash>.png`.
キャッシュキーにはコード、テーマ、scale、ターゲット幅、背景、mermaid バージョンが含まれます。依存パッケージ内に mermaid.min.js が同梱されています(ローカル読み込み、CDN からの取得なし)。

PlantUML コードブロックはデフォルトで公開 PlantUML サービスによってレンダリングされます。パイプラインに markedPlantUML が登録されており、デフォルトの serverUrl が plantuml.com を向いているため、図のソースコードは外部のサードパーティサービスへ送信されます。

packages/baoyu-md/src/extensions/plantuml.ts
serverUrl: options.serverUrl || `https://www.plantuml.com/plantuml`,
登録箇所は packages/baoyu-md/src/renderer.ts(`markedPlantUML({`)であり、本スキルの renderMarkdownDocument → initRenderer はこのレンダラーを経由します(packages/baoyu-md/src/document.ts が initRenderer を呼び出し)。SKILL.md でも PlantUML がサポート機能として記載されているため、これがデフォルトで有効な経路となります。

ドキュメント内のリモート画像は一時ディレクトリにダウンロードされ、HTML 内で data-local-path を持つ img タグに書き換えられます(下流のプラットフォームやクライアントによる再アップロードを容易にするため)。

packages/baoyu-md/src/images.ts
await downloadFile(imagePath, localPath);
トリガー条件:画像ソースが http(s):// で始まる場合(`if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {`)。本スキルはリモート画像が存在する場合にのみ一時ディレクトリを作成します(main.ts の hasRemoteImages 分岐)。ダウンロードは node:http/https を使用し、UA は Mozilla/5.0、301/302 リダイレクトに追従します。

出力およびバックアップの規約:HTML は元のファイルと同じディレクトリかつ同じ名前(.html)で書き出されます。既に存在する場合は先にリネームしてバックアップし、最終結果を JSON として stdout に出力します。

skills/baoyu-markdown-to-html/scripts/main.ts
backupPath = `${finalHtmlPath}.bak-${formatTimestamp()}`;
SKILL.md に競合処理が明記されています:`Backup: /path/to/article.html.bak-YYYYMMDDHHMMSS`。JSON 出力には htmlPath、backupPath、contentImages、mermaidImages などのフィールドが含まれます。

テーマ、カラー、フォントサイズ、引用モードは外部から設定可能な明示的オプションです。--cite は通常の外部リンクを末尾の番号付き引用にまとめますが、WeChat 自身のリンクは元の位置を維持します。

skills/baoyu-markdown-to-html/SKILL.md
`https://mp.weixin.qq.com/...` links stay as direct links and are not moved to the bottom.
テーマ解決順序:CLI --theme > 本スキルの EXTEND.md default_theme > baoyu-post-to-wechat EXTEND.md default_theme(スキル間フォールバック)> ユーザーへの問い合わせ。--cite はデフォルトで無効です(SKILL.md: 'Default: Off. Do not ask by default.')。

処理の前段で中国語の検出が行われ、ユーザーの同意が得られた場合は先に baoyu-format-markdown を呼び出して整形を行います(CJK の太字解析の不具合や中英間のスペーシングを修正)。

skills/baoyu-markdown-to-html/SKILL.md
**If user agrees**: Invoke `baoyu-format-markdown` skill to format the file, then use formatted file as input.
Step 0 は入力に CJK が含まれている場合にのみトリガーされます。ユーザーが拒否した場合は元のファイルで続行します。これはスキル間のオプション呼び出しであり、baoyu-format-markdown 自体の挙動(npx 依存関係を含む)が導入されます。

設定インターフェースは EXTEND.md(デフォルトテーマ、カスタム CSS 変数、コードブロックのスタイル、mermaid のテーマ/scale/背景)であり、3 段階のパスで最初に一致したものが使用されます。見つからない場合は初期セットアップフローを実行せず、デフォルト値が使用されます。

skills/baoyu-markdown-to-html/SKILL.md
**EXTEND.md supports**: default theme, custom CSS variables, code block style, mermaid defaults (`mermaid_theme`, `mermaid_scale`, `mermaid_background`).
初回セットアップを強制する他の baoyu スキル(image-gen/wechat など)とは異なり、本スキルは EXTEND.md がなくても直接動作可能です。

2コア機能

01Markdown → インライン CSS 適用済みスタイル付き HTML(4 種のテーマ default/grace/simple/modern + 13 種のプリセットカラー + フォント/フォントサイズオプション)
02Mermaid のローカル PNG レンダリング(headless Chrome/CDP + ハッシュキャッシュ + 失敗時の `<pre class="mermaid">` フォールバック)
03外部リンクの末尾引用化(--cite、任意)、WeChat リンクおよび生 URL リンクは除外
04画像プレースホルダーの書き換えとローカルパスのレポート(contentImages に placeholder/localPath/originalPath を含む)
05豊富な Markdown 方言のサポート:GFM テーブル、コードハイライト、アラート、脚注、ルビ、数式、PlantUML
06下流のエージェント処理を容易にする JSON 形式での結果レポート(htmlPath/backupPath/contentImages/mermaidImages)

3外部依存関係

KindDependency / Endpoint
packagebaoyu-md(npm,仓库 packages/ 内的共享包;marked/juice/highlight.js/remark 管线)
packagebaoyu-chrome-cdp(npm,仓库 packages/ 内共享包;提供 CDP 与 mermaid 渲染器)
networkPlantUML 公共渲染服务(默认 serverUrl,图表源码经 GET 送出)
networkMarkdown 中出现的任意 http(s) 图片主机(下载到本地临时目录)
cli本地 Chrome/Chromium/Edge(headless 渲染 Mermaid;缺失则回退)
clibun(首选运行时;无 bun 时 npx -y bun)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: bun {baseDir}/scripts/main.ts <markdown_file> [--theme …] [--cite] [--merma
  • 网络端点: 宣言された外部ネットワークアクセス: https://www.plantuml.com/plantuml(デフォルト、ドキュメントに plantuml コードブロックが含まれる場合のみ:図のソースコードが URL エンコードされたペイロードとして送信され、画像が返却される)
  • 本地工作目录: ファイルの読み書きと成果物の出力: 入力と同じディレクトリ・同じ名前の .html(上書き前に .html.bak-YYYYMMDDHHMMSS にリネーム)
監査ノート: 3 段落の自己証明:① 判定対象は本スキルディレクトリです(SKILL.md + scripts/main.ts + main.test.ts + bun.lock。共有パッケージのロジックはリポジトリの packages/ 内にあり、SKILL.md で公式サポート機能として宣言されています)。② ディレクトリ内の自己動作=ローカルスクリプト + ローカル headless Chrome による画像生成 + ローカルディスク書き込み(.html および imgs/.mermaid-cache/*.png、上書き前バックアップ付き)。③ オレンジ判定の決め手=SKILL.md に沿って実行した場合、ユーザーのコンテンツが外部サービスバックエンドへ送信される点です。SKILL.md には PlantUML サポートが明記されており、そのレンダリングは依存パッケージに登録された markedPlantUML を介してデフォルトの公開レンダリングサービス `serverUrl: options.serverUrl || `https://www.plantuml.com/plantuml`,` を利用します(図のソースコードが外部送信される)。また、`const protocol = url.startsWith("https://") ? https : http;` により、ドキュメント内の任意の http(s) 画像がローカルにダウンロードされます。認証情報の読み取り、リバースエンジニアリング/なりすまし、TLS ダウングレードはなく、Chrome はサンドボックスを無効化しておらず検出回避パッチも適用していません(同じリポジトリ内の post-to-wechat/post-to-weibo の `--disable-blink-features=AutomationControlled` と比較して、本スキルの Chrome 起動引数には存在しません)。そのためレッドへの引き上げは行いません。なお、ドキュメントに plantuml ブロックもリモート画像も含まれない場合、動作は完全なローカル(ブルー水準)に退行します。

5二重目の独立検証

  • [ok] 共享包依赖与版本锁定 — scripts/package.json 仅声明 baoyu-md ^0.1.1 与 baoyu-chrome-cdp ^0.1.1,bun.lock 有锁定条目;两包在本仓 packages/ 内有源码(psync 可读),非黑盒。
  • [ok] Mermaid 本地渲染且无 CDN — packages/baoyu-chrome-cdp/src/mermaid.ts 从包内 assets 读 mermaid.min.js(`if (fs.existsSync(path.join(candidate, "mermaid.min.js"))) return candidate;`)并注入本地页面,无外部脚本地址。
  • [ok] PlantUML 默认出网到公共服务器(判橙依据) — packages/baoyu-md/src/extensions/plantuml.ts 默认 serverUrl=https://www.plantuml.com/plantuml;注册于 renderer.ts 的 markedPlantUML();本 skill 的 document.ts 路径调用 initRenderer,SKILL.md 亦将 PlantUML 列为支持特性。
  • [ok] 远程图片会被真实下载 — packages/baoyu-md/src/images.ts 的 downloadFile 使用 node:http/https + Mozilla/5.0 UA 下载并跟随 301/302;本 skill 在 hasRemoteImages 时建临时目录承接,HTML 内保留原 URL 并附 data-local-path。
  • [ok] 本 skill 的 Chrome 启动参数无安全降级/反检测项 — packages/baoyu-chrome-cdp/src/index.ts 的 launchChromeBase args 仅为 --remote-debugging-port/--user-data-dir/--no-first-run/--no-default-browser-check(+headless);全包 grep bypass/detect/webdriver/stealth 零命中,无 --no-sandbox。
  • [ok] 无凭证读取 — 本目录 token 扫描 process.env/API_KEY/TOKEN/SECRET/.env 零命中;仅 EXTEND.md 偏好文件(路径在 SKILL.md 明列)。
  • [ok] mermaid securityLevel: loose 的渲染面 — packages/baoyu-chrome-cdp/src/mermaid.ts 以 `mermaid.initialize({ startOnLoad: false, theme: …, securityLevel: "loose" })` 渲染文档中的图表代码,属本地无头浏览器内执行用户文档内容;已在 injection_surface 与 verdict.risks 标注。
  • [ok] 『微信友好』定位与实际产物 — CSS 由 juice 内联(baoyu-md 依赖含 juice ^11.0.1),图片输出 localPath 供下游上传;--cite 默认关闭,与 SKILL.md 'Default: Off. Do not ask by default.' 一致。

6結論

  • WeChat 公式アカウント(公众号)向けの実用主義:CSS のインライン化 + 画像ローカルパスのレポート + 外部リンクの末尾引用化により、WeChat エディタへの貼り付け時にスタイルが崩れる問題や外部リンクがクリックできない問題を直接解決。
  • Mermaid はローカルの headless Chrome を経由しコンテンツハッシュでキャッシュされるため、クラウドレンダリングへの依存がなく、再変換時に重複して画像生成を行いません。
  • 充実したフォールバック経路:Chrome が存在しない場合やレンダリング失敗時には `<pre class="mermaid">` に退行し、変換処理全体が失敗することはありません。
  • 幅広い Markdown 方言をカバー(GFM、ハイライト、アラート、脚注、ルビ、数式、PlantUML)し、4 つのテーマ + 13 のプリセット色 + フォント/サイズオプションを備えています。
  • プログラムによる再利用が容易な出力:JSON 出力(htmlPath/backupPath/contentImages/mermaidImages)により、後続のスキル(post-to-wechat など)が直接処理を引き継げます。
  • 最適な用途: 作成済みの Markdown 記事を WeChat 公式アカウントのエディタに直接貼り付け可能なスタイル付き HTML に変換したい場合や、post-to-wechat のレンダリングフロントエンドとしての利用に最適です。また、ローカルで Mermaid や数式をレンダリングしつつローカル画像パスを維持したいオフライン執筆ワークフローにも適しています。
    不向きな用途: 社内アーキテクチャ図(PlantUML)や出所不明の画像リンクを含む機密文書の処理には適していません(デフォルトで外部送信/外部取得が発生します)。ピクセル単位の精密な制御が求められる Web サイトの組版には適していません(サイトテーマではなく WeChat 向けのインラインスタイル HTML を出力するため)。また、Chrome が存在せず Mermaid の画像出力が必須となる環境にも適していません(警告なくコードブロックに退行します)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload baoyu-markdown-to-html.tar.gz
    sha256: 548cfdf151b66892…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 1567581c26.