canghe-markdown-to-html

Markdown から HTML への変換

Markdown ファイルを、インライン CSS を使用した美しいスタイルの HTML に変換します。WeChat 公式アカウントやその他のプラットフォームに最適化されています。

スクリプトディレクトリ

エージェントの実行：この SKILL.md のディレクトリを SKILL_DIR として特定し、${SKILL_DIR}/scripts/<name>.ts を使用します。

スクリプト	目的
scripts/main.ts	メインエントリーポイント

設定（EXTEND.md）

Bash を使用して、以下の優先順位で EXTEND.md が存在するか確認します。

# Check project-level first
test -f .canghe-skills/canghe-markdown-to-html/EXTEND.md && echo "project"

# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.canghe-skills/canghe-markdown-to-html/EXTEND.md" && echo "user"

┌──────────────────────────────────────────────────────────────┬───────────────────┐ │ パス │ 場所 │ ├──────────────────────────────────────────────────────────────┼───────────────────┤ │ .canghe-skills/canghe-markdown-to-html/EXTEND.md │ プロジェクトディレクトリ │ ├──────────────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.canghe-skills/canghe-markdown-to-html/EXTEND.md │ ユーザーホーム │ └──────────────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ 結果 │ アクション │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 見つかった │ 読み込み、解析し、設定を適用します │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 見つからない │ デフォルトを使用します │ └───────────┴───────────────────────────────────────────────────────────────────────────┘

EXTEND.md で設定できる項目：デフォルトテーマ | カスタム CSS 変数 | コードブロックのスタイル

ワークフロー

ステップ 0：事前確認（中国語コンテンツ）

条件：入力ファイルに中国語テキストが含まれている場合にのみ実行します。

検出方法：

1. 入力 Markdown ファイルを読み込みます
2. コンテンツに CJK 文字（中国語／日本語／韓国語）が含まれているか確認します
3. CJK コンテンツがなければ、ステップ 1 に進みます

フォーマットの提案：

CJK コンテンツが検出され、canghe-format-markdown スキルが利用可能な場合：

AskUserQuestion を使用して、先にフォーマットするかどうかを確認します。フォーマットすると、次の問題を修正できます。

• 句読点が内側にある太字マーカーによる ** の解析失敗
• CJK／英語間のスペースの問題

ユーザーが同意した場合：canghe-format-markdown スキルを呼び出してファイルをフォーマットし、フォーマット済みのファイルを入力として使用します。

ユーザーが同意しない場合：元のファイルをそのまま使用します。

ステップ 1：テーマの確認

変換する前に、テーマを確認するため AskUserQuestion を使用します（ユーザーがすでに指定している場合を除く）。

テーマ	説明
default（推奨）	クラシックテーマ - 伝統的な組版で、見出しは中央揃えと下線付き、2 段階目の見出しは白文字のカラー背景
grace	エレガントテーマ - 文字の影、角丸カード、洗練された引用ブロック
simple	シンプルテーマ - モダンでミニマルなデザイン、非対称の角丸、すっきりとした余白

ステップ 2：変換

npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme>

ステップ 3：結果の報告

JSON 結果から出力先のパスを表示します。バックアップが作成された場合は、その旨も伝えます。

使い方

npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> [options]

オプション：

オプション	説明	デフォルト
--theme <name>	テーマ名（default、grace、simple）	default
--title <title>	フロントマターのタイトルを上書きします
--keep-title	コンテンツ内の最初の見出しを保持します	false（削除）
--help	ヘルプを表示します

例：

# Basic conversion (uses default theme, removes first heading)
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md

# With specific theme
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme grace

# Keep the first heading in content
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --keep-title

# Override title
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --title "My Article"

出力

ファイルの場所：入力 Markdown ファイルと同じディレクトリです。

• 入力：/path/to/article.md
• 出力：/path/to/article.html

競合時の処理：HTML ファイルがすでに存在する場合、先にバックアップが作成されます。

• バックアップ：/path/to/article.html.bak-YYYYMMDDHHMMSS

標準出力への JSON 出力：

{
  "title": "Article Title",
  "author": "Author Name",
  "summary": "Article summary...",
  "htmlPath": "/path/to/article.html",
  "backupPath": "/path/to/article.html.bak-20260128180000",
  "contentImages": [
    {
      "placeholder": "MDTOHTMLIMGPH_1",
      "localPath": "/path/to/img.png",
      "originalPath": "imgs/image.png"
    }
  ]
}

テーマ

テーマ	説明
default	クラシックテーマ - 伝統的な組版で、見出しは中央揃えと下線付き、2 段階目の見出しは白文字のカラー背景
grace	エレガントテーマ - 文字の影、角丸カード、洗練された引用ブロック（by @brzhang）
simple	シンプルテーマ - モダンでミニマルなデザイン、非対称の角丸、すっきりとした余白（by @okooo5km）

サポートされている Markdown 機能

機能	構文
見出し	# H1 ～ ###### H6
太字／斜体	**bold**、*italic*
コードブロック	シンタックスハイライト付きの ```lang
インラインコード	`code`
テーブル	GitHub 形式の Markdown テーブル
画像	
リンク	脚注参照付きの [text](url)
引用	> quote
リスト	箇条書きは -、番号付きは 1.
アラート	> [!NOTE]、> [!WARNING] など
脚注	[^1] 参照
ルビ	`{base
Mermaid	```mermaid の図
PlantUML	```plantuml の図

フロントマター

メタデータ用の YAML フロントマターをサポートしています：

---
title: Article Title
author: Author Name
description: Article summary
---

タイトルが見つからない場合は、最初の H1／H2 見出しから抽出するか、ファイル名を使用します。

拡張機能のサポート

EXTEND.md を使用したカスタム設定が可能です。パスとサポートされているオプションについては、Preferences セクションを参照してください。