baoyu-markdown-to-html

Markdown から HTML への変換

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

実行

エージェントによる実行：bun .agents/skills/baoyu-markdown-to-html/scripts/main.ts <markdown_file> [options] を使用します。

スクリプト	用途
scripts/main.ts	メインのエントリーポイント

パス要件

• CWD：Vault のルートから実行する必要があります。
• 入力：<markdown_file> は絶対パス、または Vault ルートからの相対パスで指定します。
• 出力：入力ファイルと同じディレクトリに .html ファイルが作成されます。

ワークフロー

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

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

検出方法：

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

フォーマットの提案：

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

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

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

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

ユーザーが辞退した場合：元のファイルで続行します。

ステップ 1：テーマの決定

テーマの決定順序（最初に一致したものを使用）：

1. ユーザーがテーマを明示的に指定した場合（CLI の --theme または会話内）
2. 指定がない場合 → AskUserQuestion を使用して確認します

テーマ	説明
default（推奨）	クラシック — 伝統的なレイアウト、下線付きの中央揃えタイトル、色付き背景に白い文字の H2
grace	エレガント — テキストシャドウ、角丸カード、洗練された引用ブロック
simple	ミニマル — モダンなミニマリストデザイン、非対称の角丸、すっきりとした余白
modern	モダン — 大きな角丸、ピル型タイトル、ゆったりした行間（伝統的な赤と金のスタイルには --color red を組み合わせます）

ステップ 1.5：引用モードの決定

デフォルト：オフ。デフォルトでは確認しません。

有効にするのは、ユーザーが「微信外链转底部引用」、「底部引用」、「文末引用」を明示的に依頼した場合、または --cite を指定した場合のみです。

有効時の動作：

• 通常の外部リンクは番号付き上付き文字として表示され、最後の 引用链接 セクションにまとめられます。
• https://mp.weixin.qq.com/... のリンクは直接リンクのままになり、末尾には移動しません。
• リンクテキストが URL と同じ裸のリンクは、本文内にそのまま残ります。

ステップ 2：変換

bun .agents/skills/baoyu-markdown-to-html/scripts/main.ts <markdown_file> --theme <theme> [--cite]

ステップ 3：結果の報告

JSON の結果に含まれる出力パスを表示します。バックアップが作成された場合は、そのことも伝えます。

使用方法

bun .agents/skills/baoyu-markdown-to-html/scripts/main.ts <markdown_file> [options]

オプション：

オプション	説明	デフォルト
--theme <name>	テーマ名（default、grace、simple、modern）	default
--color <name|hex>	基本色：プリセット名または 16 進数値	テーマのデフォルト
--font-family <name>	フォント：sans、serif、serif-cjk、mono、または CSS 値	テーマのデフォルト
--font-size <N>	フォントサイズ：14px、15px、16px、17px、18px	16px
--title <title>	Frontmatter のタイトルを上書きします
--cite	外部リンクを末尾の引用に変換し、引用链接 セクションを追加します	false（オフ）
--keep-title	コンテンツ内の最初の見出しを保持します	false（削除）
--help	ヘルプを表示します

カラープリセット：

名前	Hex	ラベル
blue	#0F4C81	クラシックブルー
green	#009874	エメラルドグリーン
vermilion	#FA5151	鮮やかな朱色
yellow	#FECE00	レモンイエロー
purple	#92617E	ラベンダーパープル
sky	#55C9EA	スカイブルー
rose	#B76E79	ローズゴールド
olive	#556B2F	オリーブグリーン
black	#333333	グラファイトブラック
gray	#A9A9A9	スモークグレー
pink	#FFB7C5	桜色
red	#A93226	中国レッド
orange	#D97757	ウォームオレンジ（modern のデフォルト）

例：

# Basic conversion (uses default theme, removes first heading)
bun .agents/skills/baoyu-markdown-to-html/scripts/main.ts article.md

# With specific theme
bun .agents/skills/baoyu-markdown-to-html/scripts/main.ts article.md --theme grace

# Theme with custom color
bun .agents/skills/baoyu-markdown-to-html/scripts/main.ts article.md --theme modern --color red

# Enable bottom citations for ordinary external links
bun .agents/skills/baoyu-markdown-to-html/scripts/main.ts article.md --cite

# Keep the first heading in content
bun .agents/skills/baoyu-markdown-to-html/scripts/main.ts article.md --keep-title

# Override title
bun .agents/skills/baoyu-markdown-to-html/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	クラシック — 従来のレイアウトで、タイトルを中央揃えにして下線を付け、H2 は色付きの背景に白いテキストで表示します
grace	エレガント — テキストシャドウ、角丸カード、洗練された引用（@brzhang による）
simple	ミニマル — 現代的でミニマルなデザイン、非対称の角丸、すっきりとした余白（@okooo5km による）
modern	モダン — 大きな角丸、ピル型のタイトル、ゆったりした行間（伝統的な赤と金のスタイルには --color red を組み合わせます）

対応する Markdown 機能

機能	構文
見出し	# H1 から ###### H6
太字／斜体	**bold**、*italic*
コードブロック	シンタックスハイライト付きの ```lang
インラインコード	`code`
表	GitHub 形式の Markdown 表
画像	
リンク	[text](url)。通常の外部リンクを末尾の参照に移動するには --cite を追加します
引用	> quote
リスト	- は箇条書き、1. は番号付きリスト
アラート	> [!NOTE]、> [!WARNING] など
脚注	[^1] 参照
ルビ	`{base
Mermaid	```mermaid 図
PlantUML	```plantuml 図

Frontmatter

メタデータ用の YAML frontmatter に対応しています。

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

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