ホーム / 全スキル / コンテンツ制作 / canghe-markdown-to-html
コンテンツ制作 · freestylefly/canghe-skills

canghe-markdown-to-html

MarkdownをWeChat(微信)互換テーマを適用したスタイル付きHTMLに変換します。コードハイライト、数式、PlantUML、脚注、アラート、インフォグラフィックに対応しています。ユーザーが「markdown to html」「convert md to html」「md转html」を要求した場合や、Markdownからスタイル付きHTML出力を必要とする場合に使用します。

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

1仕組みと動作原理

プロンプトオーケストレーション + 単一スクリプト実行:SKILL.md はエージェントに自身のディレクトリを SKILL_DIR として扱わせ、実際の変換処理を Bun/TypeScript スクリプト 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`.
ここでの処理内容:SKILL.md はルーティングとワークフローのみを担当し、実際のパース/レンダリングロジックはスクリプト内にあります。エージェントはパスを特定後、npx bun 経由で呼び出します。

変換コマンドは npx -y bun を使用してローカルスクリプトを即時実行し、--theme / --title / --keep-title などのオプションをサポートします。

skills/canghe-markdown-to-html/SKILL.md
npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme>
ここでの処理内容:Step 2 で示された実行コマンドです。npx -y は固定バージョンではなく bun ランタイムをオンザフライで取得します(サプライチェーンの側面)。

実装スタックは依存関係マニフェストによって公開されています:パースに marked、ハイライトに highlight.js、CSSインライン化に juice、メタデータ抽出に front-matter を採用しています。

skills/canghe-markdown-to-html/scripts/md/package.json
"juice": "^11.0.1", "marked": "^15.0.6", "reading-time": "^1.5.0",
ここでの処理内容:WeChat のレイアウト調整において juice による CSS インライン化が重要です。marked が Markdown→HTML を処理し、highlight.js がコードハイライトを出力します。

テーマは CSS 変数 + テーマファイルで実装されており、default テーマは各見出し、引用、コードブロック、テーブルなどのタイポグラフィを定義しています(例:H2 見出しの白抜き文字・カラー背景・中央揃え)。

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);
ここでの処理内容:EXTEND.md での上書きを容易にするためカラーには var(--md-primary-color) を使用します。テーマはスタイルのみを変更し構造は変更しません。

3段階の外部設定メカニズム:プロジェクトレベルの .canghe-skills/... が最優先され、次に $HOME/.canghe-skills/... が適用され、デフォルトテーマ、カスタム CSS 変数、コードブロックスタイルをサポートします。

skills/canghe-markdown-to-html/SKILL.md
**EXTEND.md Supports**: Default theme | Custom CSS variables | Code block style
ここでの処理内容:ユーザー設定をファイルとして保存しスキルが読み込みます。エージェントは Bash を使用して存在を検知した上で適用可否を決定します。

出力と競合処理:HTML は入力と同じディレクトリに出力され、既存ファイルがある場合は .bak-YYYYMMDDHHMMSS としてバックアップされた後、後続処理で置換するための画像プレースホルダーを含む JSON を stdout に出力します。

skills/canghe-markdown-to-html/SKILL.md
**Conflict handling**: If HTML file already exists, it will be backed up first:
ここでの処理内容:スクリプトはローカルディスクに書き込み、上書き前にバックアップを作成します。contentImages の MDTOHTMLIMGPH_n プレースホルダー機構は post-to-wechat などの下流ツールでの画像挿入に使用されます。

中国語の前処理:入力に CJK 文字が含まれる場合のみ、canghe-format-markdown の利用可能性を検知すると、事前にフォーマットを行うか確認します(句読点による ** の破損修復など)。

skills/canghe-markdown-to-html/SKILL.md
**Condition**: Only execute if input file contains Chinese text.
ここでの処理内容:Step 0 のクロススキル委任であり、canghe-format-markdown を明示的に呼び出します。これは他スキル側の挙動であり、本スキルのリスク判定基準には含めません。

オプションの PlantUML レンダリングは、図のソースコードをパブリックサーバー(デフォルト: www.plantuml.com)に送信します。これは実行時における唯一の外部送信経路です。

skills/canghe-markdown-to-html/scripts/md/extensions/plantuml.ts
* @default 'https://www.plantuml.com/plantuml'
ここでの処理内容:plantuml 拡張のデフォルト serverUrl はパブリックレンダリングサービスを指しています。リスクスキャンにより plantuml.ts:193 の fetch(svgUrl) で実際に画像を取得していることも特定されています。

2コア機能

01Markdown → インラインスタイル付き HTML 変換(WeChat 公式アカウント向けに最適化)
02コードブロックのシンタックスハイライト(highlight.js)
03WeChat 互換の3種類のテーマ(default / grace / simple)
04数式(KaTeX)、PlantUML、Mermaid ダイアグラムのサポート
05GFM アラートブロック、脚注、ルビ(ruby)などの拡張記法
06後続の画像挿入フローで使用する画像プレースホルダー JSON(MDTOHTMLIMGPH_n)の出力
07同ディレクトリへの出力 + 上書き前の自動バックアップ + stdout への JSON レポート
08外部設定の読み込み(EXTEND.md テーマ / CSS 変数 / コードブロックスタイル)および中国語事前フォーマットの委任

3外部依存関係

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

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

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme>(age
  • 网络端点: 外部ネットワークアクセスの宣言: PlantUML レンダリング:https://www.plantuml.com/plantuml に GET リクエストを送信して SVG を取得(図のソースコードを外部送信)。ドキュメントに p が含まれる場合のみ
  • 本地工作目录: ファイルの読み書きと成果物の出力: 入力と同じディレクトリに <name>.html を書き込み(上書き前に .bak-YYYYMMDDHHMMSS としてバックアップ)
監査ノート: ① 判定対象=本スキルディレクトリ(SKILL.md + scripts/main.ts + scripts/md/*)。② ディレクトリ内の自己動作=ローカル bun スクリプト + ローカルの読み書き(.html 生成、バックアップ作成)であり、認証情報の読み取り、リバースエンジニアリング/偽装、TLS/サンドボックスのダウングレードはなし。③ オレンジ判定の決定要因=SKILL.md に従った実行時にユーザーコンテンツが外部サービスバックエンドへ送信される点:SKILL.md は PlantUML サポートを明記しており、その拡張機能のデフォルト serverUrl はパブリックレンダリングサービス https://www.plantuml.com/plantuml を指している(図のソースコード送信)。リスクスキャンにより plantuml.ts:193 の fetch(svgUrl) も特定。ドキュメントに plantuml ブロックもリモート画像も含まれない場合、挙動は純粋なローカル(青判定)に後退します。canghe-format-markdown のクロススキル呼び出しは理由への記載のみとし、判定基準には含めません。

5二重目の独立検証

  • [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 判级。

6結論

  • オーケストレーションと実装の明確な分離:SKILL.md はワークフローのみを記述し、変換処理はすべて単一のエントリスクリプト内で完結するため監査が容易です。
  • WeChat 向けレイアウトへの確実な適応:juice による CSS インライン化 + 3種のテーマ + 画像プレースホルダーにより、公式アカウントの投稿パイプラインに直接連携可能です。
  • 成熟したライブラリの再利用による幅広いフォーマット対応:数式、ダイアグラム、脚注、ルビ、アラートブロック、TOC はすべて同梱の marked 拡張によって処理されます。
  • 最適な用途: Markdown 記事を WeChat 互換の HTML に変換する必要があるコンテンツクリエイターや自メディアのワークフロー。また、canghe-post-to-wechat の変換バックエンドとしても適しています。
    不向きな用途: 機密情報を含む PlantUML ダイアグラム(ソースコードが外部に送信されます)。完全なオフライン環境や、外部ネットワークへのデータ送信が一切禁止されている環境。
    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
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit dd0bf35595.