tuzi-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 .tuzi-skills/tuzi-markdown-to-html/EXTEND.md && echo "project"

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

┌──────────────────────────────────────────────────────────────┬───────────────────┐ │ Path │ Location │ ├──────────────────────────────────────────────────────────────┼───────────────────┤ │ .tuzi-skills/tuzi-markdown-to-html/EXTEND.md │ Project directory │ ├──────────────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.tuzi-skills/tuzi-markdown-to-html/EXTEND.md │ User home │ └──────────────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ Result │ Action │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Found │ Read, parse, apply settings │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Not found │ Use defaults │ └───────────┴───────────────────────────────────────────────────────────────────────────┘

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

ワークフロー

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

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

検出：

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

形式の提案：

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

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

• 句読点が内側にある太字マーカーが原因で ** の解析に失敗する問題
• CJK と英語の間隔の問題

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

ユーザーが同意しない場合：元のファイルを使って続行します。

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

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

1. ユーザーがテーマを明示的に指定（CLI の --theme または会話内）
2. EXTEND.md の default_theme（このスキル独自の EXTEND.md。ステップ 0 で確認済み）
3. tuzi-post-to-wechat の EXTEND.md の default_theme（他スキルからのフォールバック）
4. 見つからない場合 → AskUserQuestion を使用して確認します

他スキルの EXTEND.md の確認（このスキルの EXTEND.md に default_theme がない場合のみ）：

# Check tuzi-post-to-wechat EXTEND.md for default_theme
test -f "$HOME/.tuzi-skills/tuzi-post-to-wechat/EXTEND.md" && grep -o 'default_theme:.*' "$HOME/.tuzi-skills/tuzi-post-to-wechat/EXTEND.md"

EXTEND.md からテーマが解決された場合：そのまま使用し、ユーザーには確認しません。

デフォルトが見つからない場合：AskUserQuestion を使用して確認します。

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

ステップ 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、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 のタイトルを上書き
--keep-title	コンテンツの最初の見出しを保持	false（削除）
--help	ヘルプを表示

カラープリセット：

名前	16進数	ラベル
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)
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

# Theme with custom color
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme modern --color red

# 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	エレガントなテーマ - 文字の影、角丸カード、洗練された引用ブロック（@brzhang 作）
simple	シンプルなテーマ - モダンでミニマルなスタイル、非対称の角丸、すっきりとした余白（@okooo5km 作）
modern	モダンなテーマ - 大きな角丸、ピル型の見出し、ゆったりとした行間（--color red を併用すると、伝統的な赤と金のスタイルを再現できます）

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

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

Frontmatter

メタデータ用の YAML frontmatter をサポートしています。

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

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

拡張機能のサポート

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