zenn-markdown-html 0.2.11 → 0.2.12-alpha.0

package/lib/utils/md-renderer-fence.d.ts

@@ -1,8 +1,96 @@
+/**
+ * コードブロックのレンダリングとシンタックスハイライト
+ *
+ * ## 非同期処理アーキテクチャの概要
+ *
+ * Shiki（シンタックスハイライター）は非同期APIを持つが、
+ * markdown-it のレンダラーは同期的に文字列を返す必要がある。
+ * この制約を解決するため、プレースホルダー方式を採用している。
+ *
+ * ### 処理フロー（3フェーズ）
+ *
+ * ```
+ * [Phase 1: 収集] markdown-it レンダリング（同期）
+ *     ↓
+ *     コードブロックを検出するたびに:
+ *     1. コードブロック情報を配列に保存
+ *     2. プレースホルダー（HTMLコメント）を返す
+ *     ↓
+ *     出力: プレースホルダー付きHTML + コードブロック情報配列
+ *
+ * [Phase 2: ハイライト] Shiki によるハイライト（非同期・並列）
+ *     ↓
+ *     Promise.all で全コードブロックを並列処理
+ *     ↓
+ *     出力: ハイライト済みHTML配列
+ *
+ * [Phase 3: 置換] プレースホルダーを置換（同期）
+ *     ↓
+ *     プレースホルダーをハイライト済みHTMLに置換
+ *     ↓
+ *     出力: 最終HTML
+ * ```
+ *
+ * ### この方式のメリット
+ *
+ * 1. 同期/非同期の不一致を解決: markdown-it の同期的なプラグインシステムを維持
+ * 2. 並列処理: 複数のコードブロックを Promise.all で同時にハイライト
+ * 3. 遅延ロード: Shiki の言語定義を必要に応じてロード（メモリ効率）
+ *
+ * ### 関連ファイル
+ *
+ * - `index.ts`: markdownToHtml() - 3フェーズを統合
+ * - `highlight.ts`: highlight() - Shiki によるハイライト処理
+ * - `md-renderer-fence.ts`: このファイル - Phase 1 と 3 を担当
+ */
 import MarkdownIt from 'markdown-it';
 import { MarkdownOptions } from '../types';
+/**
+ * コードブロック情報を保存するインターフェース
+ * Phase 1 で収集し、Phase 2 でハイライト処理に使用
+ */
+export interface CodeBlockInfo {
+    content: string;
+    langName: string;
+    hasDiff: boolean;
+    fileName?: string;
+    line?: number;
+    placeholder: string;
+}
 export declare function parseInfo(str: string): {
     hasDiff: boolean;
     langName: string;
     fileName?: string;
 };
-export declare function mdRendererFence(md: MarkdownIt, options?: MarkdownOptions): void;
+/**
+ * [Phase 1] markdown-it にコードブロックのレンダラーを登録する
+ *
+ * markdown-it がコードブロック（```）を検出するたびに呼ばれ、
+ * 以下の処理を行う:
+ * 1. コードブロックの情報（内容、言語、diff有無など）を codeBlocks 配列に追加
+ * 2. プレースホルダー（例: <!--SHIKI_CODE_BLOCK_xxxxxxxx-->）を返す
+ *
+ * このレンダラーは同期的に動作し、実際のハイライト処理は
+ * Phase 2（applyHighlighting）で非同期に行われる。
+ *
+ * @param md - markdown-it インスタンス
+ * @param options - Markdown 変換オプション
+ * @param codeBlocks - コードブロック情報を格納する配列（副作用で変更される）
+ */
+export declare function mdRendererFence(md: MarkdownIt, options: MarkdownOptions, codeBlocks: CodeBlockInfo[]): void;
+/**
+ * [Phase 2 & 3] プレースホルダーをハイライトされたコードに置換する
+ *
+ * Phase 2: 全コードブロックを Shiki で並列ハイライト
+ *   - Promise.all により、複数のコードブロックを同時に処理
+ *   - 各コードブロックに対して highlight() を呼び出し
+ *   - 言語が未ロードの場合は自動的にロード（遅延ロード）
+ *
+ * Phase 3: プレースホルダーを置換
+ *   - <!--SHIKI_CODE_BLOCK_xxxxxxxx--> を実際のハイライト済み HTML に置換
+ *
+ * @param html - プレースホルダーを含む HTML 文字列
+ * @param codeBlocks - Phase 1 で収集したコードブロック情報の配列
+ * @returns ハイライト済みの完全な HTML 文字列
+ */
+export declare function applyHighlighting(html: string, codeBlocks: CodeBlockInfo[]): Promise<string>;

package/lib/utils/md-renderer-fence.js

@@ -3,18 +3,111 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.applyHighlighting = applyHighlighting;
 exports.mdRendererFence = mdRendererFence;
 exports.parseInfo = parseInfo;
 var _markdownIt = require("./markdown-it");
 var _highlight = require("./highlight");
-function getHtml({
+/**
+ * コードブロックのレンダリングとシンタックスハイライト
+ *
+ * ## 非同期処理アーキテクチャの概要
+ *
+ * Shiki（シンタックスハイライター）は非同期APIを持つが、
+ * markdown-it のレンダラーは同期的に文字列を返す必要がある。
+ * この制約を解決するため、プレースホルダー方式を採用している。
+ *
+ * ### 処理フロー（3フェーズ）
+ *
+ * ```
+ * [Phase 1: 収集] markdown-it レンダリング（同期）
+ *     ↓
+ *     コードブロックを検出するたびに:
+ *     1. コードブロック情報を配列に保存
+ *     2. プレースホルダー（HTMLコメント）を返す
+ *     ↓
+ *     出力: プレースホルダー付きHTML + コードブロック情報配列
+ *
+ * [Phase 2: ハイライト] Shiki によるハイライト（非同期・並列）
+ *     ↓
+ *     Promise.all で全コードブロックを並列処理
+ *     ↓
+ *     出力: ハイライト済みHTML配列
+ *
+ * [Phase 3: 置換] プレースホルダーを置換（同期）
+ *     ↓
+ *     プレースホルダーをハイライト済みHTMLに置換
+ *     ↓
+ *     出力: 最終HTML
+ * ```
+ *
+ * ### この方式のメリット
+ *
+ * 1. 同期/非同期の不一致を解決: markdown-it の同期的なプラグインシステムを維持
+ * 2. 並列処理: 複数のコードブロックを Promise.all で同時にハイライト
+ * 3. 遅延ロード: Shiki の言語定義を必要に応じてロード（メモリ効率）
+ *
+ * ### 関連ファイル
+ *
+ * - `index.ts`: markdownToHtml() - 3フェーズを統合
+ * - `highlight.ts`: highlight() - Shiki によるハイライト処理
+ * - `md-renderer-fence.ts`: このファイル - Phase 1 と 3 を担当
+ */
+
+/**
+ * コードブロック情報を保存するインターフェース
+ * Phase 1 で収集し、Phase 2 でハイライト処理に使用
+ */
+
+// プレースホルダーのプレフィックス
+const PLACEHOLDER_PREFIX = '<!--SHIKI_CODE_BLOCK_';
+const PLACEHOLDER_SUFFIX = '-->';
+
+/**
+ * ランダムな8文字の文字列を生成する
+ */
+function generateRandomId() {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+/**
+ * プレースホルダーを生成する
+ * ユーザーが本文中に同じ文字列を書いても衝突しないようランダムIDを使用
+ */
+function createPlaceholder() {
+  return `${PLACEHOLDER_PREFIX}${generateRandomId()}${PLACEHOLDER_SUFFIX}`;
+}
+
+/**
+ * コードブロックの HTML を生成する
+ * Shiki の出力（<pre><code>...</code></pre>）を外側のコンテナでラップする
+ * 注: <pre> や <code> へのクラス・属性追加は highlight() の transformers で行う
+ */
+function wrapHighlightedCode({
+  highlightedHtml,
+  fileName
+}) {
+  // ファイル名コンテナを追加
+  const fileNameHtml = fileName ? `<div class="code-block-filename-container"><span class="code-block-filename">${_markdownIt.md.utils.escapeHtml(fileName)}</span></div>` : '';
+  return `<div class="code-block-container">${fileNameHtml}${highlightedHtml}</div>`;
+}
+
+/**
+ * エラー時のフォールバック HTML を生成
+ * Shiki でのハイライトに失敗した場合に使用
+ */
+function getPlainHtml({
   content,
-  className,
   fileName,
   line
 }) {
-  const escapedClass = _markdownIt.md.utils.escapeHtml(className);
-  return `<div class="code-block-container">${fileName ? `<div class="code-block-filename-container"><span class="code-block-filename">${_markdownIt.md.utils.escapeHtml(fileName)}</span></div>` : ''}<pre class="${escapedClass}"><code class="${escapedClass !== '' ? `${escapedClass} code-line` : 'code-line'}" ${line !== undefined ? `data-line="${line}"` : ''}>${content}</code></pre></div>`;
+  const escapedContent = _markdownIt.md.utils.escapeHtml(content);
+  const lineAttr = line !== undefined ? ` data-line="${line}"` : '';
+  const preHtml = `<pre><code class="code-line"${lineAttr}>${escapedContent}</code></pre>`;
+  return wrapHighlightedCode({
+    highlightedHtml: preHtml,
+    fileName
+  });
 }
 function getClassName({
   langName = '',
@@ -27,13 +120,11 @@ function getClassName({
   }
   return langName ? `language-${langName}` : '';
 }
+
+// Shiki がネイティブサポートしていない言語のフォールバック
 const fallbackLanguages = {
-  vue: 'html',
   react: 'jsx',
-  fish: 'shell',
-  sh: 'shell',
-  cwl: 'yaml',
-  tf: 'hcl' // ref: https://github.com/PrismJS/prism/issues/1252
+  cwl: 'yaml'
 };
 function normalizeLangName(str) {
   if (!(str !== null && str !== void 0 && str.length)) return '';
@@ -64,7 +155,23 @@ function parseInfo(str) {
     hasDiff
   };
 }
-function mdRendererFence(md, options) {
+
+/**
+ * [Phase 1] markdown-it にコードブロックのレンダラーを登録する
+ *
+ * markdown-it がコードブロック（```）を検出するたびに呼ばれ、
+ * 以下の処理を行う:
+ * 1. コードブロックの情報（内容、言語、diff有無など）を codeBlocks 配列に追加
+ * 2. プレースホルダー（例: <!--SHIKI_CODE_BLOCK_xxxxxxxx-->）を返す
+ *
+ * このレンダラーは同期的に動作し、実際のハイライト処理は
+ * Phase 2（applyHighlighting）で非同期に行われる。
+ *
+ * @param md - markdown-it インスタンス
+ * @param options - Markdown 変換オプション
+ * @param codeBlocks - コードブロック情報を格納する配列（副作用で変更される）
+ */
+function mdRendererFence(md, options, codeBlocks) {
   // override fence
   md.renderer.rules.fence = function (...args) {
     var _tokens$idx$map;
@@ -80,21 +187,70 @@ function mdRendererFence(md, options) {
     } = parseInfo(info);
     if (langName === 'mermaid') {
       var _options$customEmbed;
-      const generator = options === null || options === void 0 || (_options$customEmbed = options.customEmbed) === null || _options$customEmbed === void 0 ? void 0 : _options$customEmbed.mermaid;
+      const generator = (_options$customEmbed = options.customEmbed) === null || _options$customEmbed === void 0 ? void 0 : _options$customEmbed.mermaid;
       // generator が(上書きされて)定義されてない場合はそのまま出力する
       return generator ? generator(content.trim(), options) : content;
     }
-    const className = getClassName({
-      langName,
-      hasDiff
-    });
-    const highlightedContent = (0, _highlight.highlight)(content, langName, hasDiff);
     const fenceStart = (_tokens$idx$map = tokens[idx].map) === null || _tokens$idx$map === void 0 ? void 0 : _tokens$idx$map[0];
-    return getHtml({
-      content: highlightedContent,
-      className,
+    const placeholder = createPlaceholder();
+    codeBlocks.push({
+      content,
+      langName,
+      hasDiff,
       fileName,
-      line: fenceStart
+      line: fenceStart,
+      placeholder
     });
+    return placeholder;
   };
+}
+
+/**
+ * [Phase 2 & 3] プレースホルダーをハイライトされたコードに置換する
+ *
+ * Phase 2: 全コードブロックを Shiki で並列ハイライト
+ *   - Promise.all により、複数のコードブロックを同時に処理
+ *   - 各コードブロックに対して highlight() を呼び出し
+ *   - 言語が未ロードの場合は自動的にロード（遅延ロード）
+ *
+ * Phase 3: プレースホルダーを置換
+ *   - <!--SHIKI_CODE_BLOCK_xxxxxxxx--> を実際のハイライト済み HTML に置換
+ *
+ * @param html - プレースホルダーを含む HTML 文字列
+ * @param codeBlocks - Phase 1 で収集したコードブロック情報の配列
+ * @returns ハイライト済みの完全な HTML 文字列
+ */
+async function applyHighlighting(html, codeBlocks) {
+  // すべてのコードブロックを並列でハイライト
+  const highlightedBlocks = await Promise.all(codeBlocks.map(async block => {
+    const className = getClassName({
+      langName: block.langName,
+      hasDiff: block.hasDiff
+    });
+    try {
+      const highlightedHtml = await (0, _highlight.highlight)(block.content, block.langName, {
+        hasDiff: block.hasDiff,
+        className,
+        line: block.line
+      });
+      return wrapHighlightedCode({
+        highlightedHtml,
+        fileName: block.fileName
+      });
+    } catch {
+      // エラー時はプレーンテキストとして出力
+      return getPlainHtml({
+        content: block.content,
+        fileName: block.fileName,
+        line: block.line
+      });
+    }
+  }));
+
+  // プレースホルダーを置換
+  let result = html;
+  for (let i = 0; i < highlightedBlocks.length; i++) {
+    result = result.replace(codeBlocks[i].placeholder, highlightedBlocks[i]);
+  }
+  return result;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-markdown-html",
-  "version": "0.2.11",
+  "version": "0.2.12-alpha.0",
   "license": "MIT",
   "description": "Convert markdown to zenn flavor html.",
   "main": "lib/index.js",
@@ -40,9 +40,7 @@
     "@eslint/js": "^9.38.0",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^24.9.1",
-    "@types/prismjs": "^1.26.5",
     "@types/sanitize-html": "^2.16.0",
-    "babel-plugin-prismjs": "^2.1.0",
     "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
     "node-html-parser": "^7.0.1",
@@ -61,10 +59,10 @@
     "markdown-it-inline-comments": "^1.0.1",
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-task-lists": "^2.1.1",
-    "prismjs": "^1.30.0",
-    "sanitize-html": "^2.17.0"
+    "sanitize-html": "^2.17.0",
+    "shiki": "^1.24.0"
   },
-  "gitHead": "48d124814a4e625ae047c4ae01b3084ffae0aa0d",
+  "gitHead": "3d5f1d52c73b986b5a0ec911c7078d7a4822566a",
   "publishConfig": {
     "access": "public"
   }

package/lib/prism-plugins/prism-diff-highlight.d.ts

@@ -1,7 +0,0 @@
-/**
- * PrismJSのDiff構文を使用できるようにするためのプラグイン
- * ソースコードの大部分は、以下のファイルより抜き出したもの
- * @reference https://github.com/PrismJS/prism/blob/master/plugins/diff-highlight/prism-diff-highlight.js
- * @note `babel-plugin-prismjs`によって全ての言語プラグインを読み込んでいるため`locaLanguages()`の実行はしていない
- */
-export declare function enableDiffHighlight(): void;