baoyu-markdown-to-html

Markdown から HTML への変換ツール

Markdown ファイルを、WeChat Official Account やその他のプラットフォーム向けに最適化された、インライン CSS を含む美しいスタイルの HTML に変換します。

スクリプトディレクトリ

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

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

設定（EXTEND.md）

Bash を使用して、優先順位に従って EXTEND.md の有無を確認します。

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

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

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

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

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

ワークフロー

ステップ 0：事前チェック（中国語のコンテンツ）

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

検出方法：

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

形式の提案：

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

AskUserQuestion を使用して、先に書式を整えるかどうかを尋ねます。書式を整えることで、次の問題を修正できます。

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

ユーザーが同意した場合：baoyu-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 セクションを参照してください。