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

package/lib/utils/highlight.js

@@ -3,329 +3,262 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getHighlighter = getHighlighter;
 exports.highlight = highlight;
-var _prismCore = _interopRequireDefault(require("prismjs/components/prism-core"));
-require("prismjs/components/prism-markup");
-require("prismjs/components/prism-css");
-require("prismjs/components/prism-clike");
-require("prismjs/components/prism-regex");
-require("prismjs/components/prism-javascript");
-require("prismjs/components/prism-abap");
-require("prismjs/components/prism-abnf");
-require("prismjs/components/prism-actionscript");
-require("prismjs/components/prism-ada");
-require("prismjs/components/prism-agda");
-require("prismjs/components/prism-al");
-require("prismjs/components/prism-antlr4");
-require("prismjs/components/prism-apacheconf");
-require("prismjs/components/prism-sql");
-require("prismjs/components/prism-apex");
-require("prismjs/components/prism-apl");
-require("prismjs/components/prism-applescript");
-require("prismjs/components/prism-aql");
-require("prismjs/components/prism-c");
-require("prismjs/components/prism-cpp");
-require("prismjs/components/prism-arduino");
-require("prismjs/components/prism-arff");
-require("prismjs/components/prism-armasm");
-require("prismjs/components/prism-bash");
-require("prismjs/components/prism-yaml");
-require("prismjs/components/prism-markdown");
-require("prismjs/components/prism-arturo");
-require("prismjs/components/prism-asciidoc");
-require("prismjs/components/prism-csharp");
-require("prismjs/components/prism-aspnet");
-require("prismjs/components/prism-asm6502");
-require("prismjs/components/prism-asmatmel");
-require("prismjs/components/prism-autohotkey");
-require("prismjs/components/prism-autoit");
-require("prismjs/components/prism-avisynth");
-require("prismjs/components/prism-avro-idl");
-require("prismjs/components/prism-awk");
-require("prismjs/components/prism-basic");
-require("prismjs/components/prism-batch");
-require("prismjs/components/prism-bbcode");
-require("prismjs/components/prism-bbj");
-require("prismjs/components/prism-bicep");
-require("prismjs/components/prism-birb");
-require("prismjs/components/prism-bison");
-require("prismjs/components/prism-bnf");
-require("prismjs/components/prism-bqn");
-require("prismjs/components/prism-brainfuck");
-require("prismjs/components/prism-brightscript");
-require("prismjs/components/prism-bro");
-require("prismjs/components/prism-bsl");
-require("prismjs/components/prism-cfscript");
-require("prismjs/components/prism-chaiscript");
-require("prismjs/components/prism-cil");
-require("prismjs/components/prism-cilkc");
-require("prismjs/components/prism-cilkcpp");
-require("prismjs/components/prism-clojure");
-require("prismjs/components/prism-cmake");
-require("prismjs/components/prism-cobol");
-require("prismjs/components/prism-coffeescript");
-require("prismjs/components/prism-concurnas");
-require("prismjs/components/prism-csp");
-require("prismjs/components/prism-cooklang");
-require("prismjs/components/prism-coq");
-require("prismjs/components/prism-ruby");
-require("prismjs/components/prism-crystal");
-require("prismjs/components/prism-css-extras");
-require("prismjs/components/prism-csv");
-require("prismjs/components/prism-cue");
-require("prismjs/components/prism-cypher");
-require("prismjs/components/prism-d");
-require("prismjs/components/prism-dart");
-require("prismjs/components/prism-dataweave");
-require("prismjs/components/prism-dax");
-require("prismjs/components/prism-dhall");
-require("prismjs/components/prism-diff");
-require("prismjs/components/prism-markup-templating");
-require("prismjs/components/prism-django");
-require("prismjs/components/prism-dns-zone-file");
-require("prismjs/components/prism-docker");
-require("prismjs/components/prism-dot");
-require("prismjs/components/prism-ebnf");
-require("prismjs/components/prism-editorconfig");
-require("prismjs/components/prism-eiffel");
-require("prismjs/components/prism-ejs");
-require("prismjs/components/prism-elixir");
-require("prismjs/components/prism-elm");
-require("prismjs/components/prism-lua");
-require("prismjs/components/prism-etlua");
-require("prismjs/components/prism-erb");
-require("prismjs/components/prism-erlang");
-require("prismjs/components/prism-excel-formula");
-require("prismjs/components/prism-fsharp");
-require("prismjs/components/prism-factor");
-require("prismjs/components/prism-false");
-require("prismjs/components/prism-firestore-security-rules");
-require("prismjs/components/prism-flow");
-require("prismjs/components/prism-fortran");
-require("prismjs/components/prism-ftl");
-require("prismjs/components/prism-gml");
-require("prismjs/components/prism-gap");
-require("prismjs/components/prism-gcode");
-require("prismjs/components/prism-gdscript");
-require("prismjs/components/prism-gedcom");
-require("prismjs/components/prism-gettext");
-require("prismjs/components/prism-gherkin");
-require("prismjs/components/prism-git");
-require("prismjs/components/prism-glsl");
-require("prismjs/components/prism-gn");
-require("prismjs/components/prism-linker-script");
-require("prismjs/components/prism-go");
-require("prismjs/components/prism-go-module");
-require("prismjs/components/prism-gradle");
-require("prismjs/components/prism-graphql");
-require("prismjs/components/prism-groovy");
-require("prismjs/components/prism-less");
-require("prismjs/components/prism-scss");
-require("prismjs/components/prism-textile");
-require("prismjs/components/prism-haml");
-require("prismjs/components/prism-handlebars");
-require("prismjs/components/prism-haskell");
-require("prismjs/components/prism-haxe");
-require("prismjs/components/prism-hcl");
-require("prismjs/components/prism-hlsl");
-require("prismjs/components/prism-hoon");
-require("prismjs/components/prism-hpkp");
-require("prismjs/components/prism-hsts");
-require("prismjs/components/prism-json");
-require("prismjs/components/prism-uri");
-require("prismjs/components/prism-http");
-require("prismjs/components/prism-ichigojam");
-require("prismjs/components/prism-icon");
-require("prismjs/components/prism-icu-message-format");
-require("prismjs/components/prism-idris");
-require("prismjs/components/prism-ignore");
-require("prismjs/components/prism-inform7");
-require("prismjs/components/prism-ini");
-require("prismjs/components/prism-io");
-require("prismjs/components/prism-j");
-require("prismjs/components/prism-java");
-require("prismjs/components/prism-php");
-require("prismjs/components/prism-javadoclike");
-require("prismjs/components/prism-scala");
-require("prismjs/components/prism-javadoc");
-require("prismjs/components/prism-javastacktrace");
-require("prismjs/components/prism-jexl");
-require("prismjs/components/prism-jolie");
-require("prismjs/components/prism-jq");
-require("prismjs/components/prism-js-templates");
-require("prismjs/components/prism-typescript");
-require("prismjs/components/prism-jsdoc");
-require("prismjs/components/prism-n4js");
-require("prismjs/components/prism-js-extras");
-require("prismjs/components/prism-json5");
-require("prismjs/components/prism-jsonp");
-require("prismjs/components/prism-jsstacktrace");
-require("prismjs/components/prism-julia");
-require("prismjs/components/prism-keepalived");
-require("prismjs/components/prism-keyman");
-require("prismjs/components/prism-kotlin");
-require("prismjs/components/prism-kumir");
-require("prismjs/components/prism-kusto");
-require("prismjs/components/prism-latex");
-require("prismjs/components/prism-latte");
-require("prismjs/components/prism-scheme");
-require("prismjs/components/prism-lilypond");
-require("prismjs/components/prism-liquid");
-require("prismjs/components/prism-lisp");
-require("prismjs/components/prism-livescript");
-require("prismjs/components/prism-llvm");
-require("prismjs/components/prism-log");
-require("prismjs/components/prism-lolcode");
-require("prismjs/components/prism-magma");
-require("prismjs/components/prism-makefile");
-require("prismjs/components/prism-mata");
-require("prismjs/components/prism-matlab");
-require("prismjs/components/prism-maxscript");
-require("prismjs/components/prism-mel");
-require("prismjs/components/prism-mermaid");
-require("prismjs/components/prism-metafont");
-require("prismjs/components/prism-mizar");
-require("prismjs/components/prism-mongodb");
-require("prismjs/components/prism-monkey");
-require("prismjs/components/prism-moonscript");
-require("prismjs/components/prism-n1ql");
-require("prismjs/components/prism-nand2tetris-hdl");
-require("prismjs/components/prism-naniscript");
-require("prismjs/components/prism-nasm");
-require("prismjs/components/prism-neon");
-require("prismjs/components/prism-nevod");
-require("prismjs/components/prism-nginx");
-require("prismjs/components/prism-nim");
-require("prismjs/components/prism-nix");
-require("prismjs/components/prism-nsis");
-require("prismjs/components/prism-objectivec");
-require("prismjs/components/prism-ocaml");
-require("prismjs/components/prism-odin");
-require("prismjs/components/prism-opencl");
-require("prismjs/components/prism-openqasm");
-require("prismjs/components/prism-oz");
-require("prismjs/components/prism-parigp");
-require("prismjs/components/prism-parser");
-require("prismjs/components/prism-pascal");
-require("prismjs/components/prism-pascaligo");
-require("prismjs/components/prism-psl");
-require("prismjs/components/prism-pcaxis");
-require("prismjs/components/prism-peoplecode");
-require("prismjs/components/prism-perl");
-require("prismjs/components/prism-phpdoc");
-require("prismjs/components/prism-php-extras");
-require("prismjs/components/prism-plant-uml");
-require("prismjs/components/prism-plsql");
-require("prismjs/components/prism-powerquery");
-require("prismjs/components/prism-powershell");
-require("prismjs/components/prism-processing");
-require("prismjs/components/prism-prolog");
-require("prismjs/components/prism-promql");
-require("prismjs/components/prism-properties");
-require("prismjs/components/prism-protobuf");
-require("prismjs/components/prism-stylus");
-require("prismjs/components/prism-twig");
-require("prismjs/components/prism-pug");
-require("prismjs/components/prism-puppet");
-require("prismjs/components/prism-pure");
-require("prismjs/components/prism-purebasic");
-require("prismjs/components/prism-purescript");
-require("prismjs/components/prism-python");
-require("prismjs/components/prism-qsharp");
-require("prismjs/components/prism-q");
-require("prismjs/components/prism-qml");
-require("prismjs/components/prism-qore");
-require("prismjs/components/prism-r");
-require("prismjs/components/prism-racket");
-require("prismjs/components/prism-cshtml");
-require("prismjs/components/prism-jsx");
-require("prismjs/components/prism-tsx");
-require("prismjs/components/prism-reason");
-require("prismjs/components/prism-rego");
-require("prismjs/components/prism-renpy");
-require("prismjs/components/prism-rescript");
-require("prismjs/components/prism-rest");
-require("prismjs/components/prism-rip");
-require("prismjs/components/prism-roboconf");
-require("prismjs/components/prism-robotframework");
-require("prismjs/components/prism-rust");
-require("prismjs/components/prism-sas");
-require("prismjs/components/prism-sass");
-require("prismjs/components/prism-shell-session");
-require("prismjs/components/prism-smali");
-require("prismjs/components/prism-smalltalk");
-require("prismjs/components/prism-smarty");
-require("prismjs/components/prism-sml");
-require("prismjs/components/prism-solidity");
-require("prismjs/components/prism-solution-file");
-require("prismjs/components/prism-soy");
-require("prismjs/components/prism-turtle");
-require("prismjs/components/prism-sparql");
-require("prismjs/components/prism-splunk-spl");
-require("prismjs/components/prism-sqf");
-require("prismjs/components/prism-squirrel");
-require("prismjs/components/prism-stan");
-require("prismjs/components/prism-stata");
-require("prismjs/components/prism-iecst");
-require("prismjs/components/prism-supercollider");
-require("prismjs/components/prism-swift");
-require("prismjs/components/prism-systemd");
-require("prismjs/components/prism-t4-templating");
-require("prismjs/components/prism-t4-cs");
-require("prismjs/components/prism-vbnet");
-require("prismjs/components/prism-t4-vb");
-require("prismjs/components/prism-tap");
-require("prismjs/components/prism-tcl");
-require("prismjs/components/prism-tt2");
-require("prismjs/components/prism-toml");
-require("prismjs/components/prism-tremor");
-require("prismjs/components/prism-typoscript");
-require("prismjs/components/prism-unrealscript");
-require("prismjs/components/prism-uorazor");
-require("prismjs/components/prism-v");
-require("prismjs/components/prism-vala");
-require("prismjs/components/prism-velocity");
-require("prismjs/components/prism-verilog");
-require("prismjs/components/prism-vhdl");
-require("prismjs/components/prism-vim");
-require("prismjs/components/prism-visual-basic");
-require("prismjs/components/prism-warpscript");
-require("prismjs/components/prism-wasm");
-require("prismjs/components/prism-web-idl");
-require("prismjs/components/prism-wgsl");
-require("prismjs/components/prism-wiki");
-require("prismjs/components/prism-wolfram");
-require("prismjs/components/prism-wren");
-require("prismjs/components/prism-xeora");
-require("prismjs/components/prism-xml-doc");
-require("prismjs/components/prism-xojo");
-require("prismjs/components/prism-xquery");
-require("prismjs/components/prism-yang");
-require("prismjs/components/prism-zig");
-var _markdownIt = require("./markdown-it");
-var _prismDiffHighlight = require("../prism-plugins/prism-diff-highlight");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// diffプラグインを有効化
-(0, _prismDiffHighlight.enableDiffHighlight)();
-function highlightContent({
-  text,
-  prismGrammar,
-  langName,
-  hasDiff
-}) {
-  if (prismGrammar && langName) {
-    if (hasDiff) return _prismCore.default.highlight(text, _prismCore.default.languages.diff, `diff-${langName}`);
-    return _prismCore.default.highlight(text, prismGrammar, langName);
+var _shiki = require("shiki");
+/**
+ * Shiki によるシンタックスハイライト処理
+ *
+ * このモジュールは Phase 2（applyHighlighting）から呼び出され、
+ * 個々のコードブロックをハイライトする役割を持つ。
+ *
+ * ## 特徴
+ *
+ * - シングルトン: ハイライターインスタンスは1つだけ作成され再利用される
+ * - 遅延ロード: 言語定義は初回使用時にのみロードされる
+ * - diff サポート: ベース言語のハイライト + diff 背景色の両方を適用
+ * - transformers: Shiki の transformers API で AST レベルの変換を実行
+ *
+ * ## 関連ファイル
+ *
+ * - `md-renderer-fence.ts`: Phase 1（収集）と Phase 3（置換）
+ * - `index.ts`: 全体の統合
+ */
+
+/**
+ * Shiki ハイライターの初期化 Promise をキャッシュ
+ *
+ * 注: インスタンスではなく Promise をキャッシュすることで、
+ * Promise.all による並列処理時の競合状態を防ぐ。
+ *
+ * 問題のあるパターン:
+ *   let instance = null;
+ *   if (instance) return instance;
+ *   instance = await createHighlighter(); // ← await 中に他の呼び出しが来る
+ *
+ * 正しいパターン:
+ *   let promise = null;
+ *   if (!promise) promise = createHighlighter(); // ← await しない
+ *   return promise; // ← 同じ Promise を返す
+ */
+let highlighterPromise = null;
+const SHIKI_THEME = 'github-dark';
+
+/**
+ * Shiki ハイライターを初期化する
+ * 最初は最低限のセットで初期化し、必要に応じて言語をロードする
+ */
+async function getHighlighter() {
+  if (!highlighterPromise) {
+    // Promise をキャッシュ（await しない）
+    highlighterPromise = (0, _shiki.createHighlighter)({
+      themes: [SHIKI_THEME],
+      langs: []
+    });
+  }
+  return highlighterPromise;
+}
+
+/**
+ * 言語がサポートされているかチェックし、必要に応じてロードする
+ */
+async function ensureLanguageLoaded(highlighter, langName) {
+  // 既にロード済みかチェック
+  const loadedLangs = highlighter.getLoadedLanguages();
+  if (loadedLangs.includes(langName)) {
+    return true;
+  }
+
+  // bundledLanguages に含まれているかチェック
+  if (langName in _shiki.bundledLanguages) {
+    await highlighter.loadLanguage(langName);
+    return true;
+  }
+  return false;
+}
+
+/**
+ * ハイライトオプション
+ */
+
+/**
+ * diff プレフィックスの定義
+ * Prism.js の diff-highlight プラグインと互換性を持たせる
+ */
+const DIFF_PREFIXES = {
+  // 削除行
+  '-': 'remove',
+  // deleted-sign
+  '<': 'remove',
+  // deleted-arrow
+  // 挿入行
+  '+': 'add',
+  // inserted-sign
+  '>': 'add' // inserted-arrow
+};
+
+/** コンテキスト行（変更なし）のプレフィックス */
+const DIFF_CONTEXT_PREFIX = ' ';
+
+/**
+ * diff 行スタイルを適用する transformer を作成
+ * 行頭のプレフィックス (+, -, <, >, スペース) を検出して処理
+ * - +, -, <, >: 挿入/削除のクラスを追加し、プレフィックスをラップ
+ * - スペース: プレフィックスのみラップ（コンテキスト行）
+ */
+function createDiffTransformer() {
+  return {
+    line(node, lineNumber) {
+      // ソースコードの該当行を取得
+      const lines = this.source.split('\n');
+      const lineText = lines[lineNumber - 1] ?? '';
+      const firstChar = lineText.charAt(0);
+      if (firstChar in DIFF_PREFIXES) {
+        // 追加/削除行
+        this.addClassToHast(node, 'diff');
+        this.addClassToHast(node, DIFF_PREFIXES[firstChar]);
+        wrapDiffPrefix(node, firstChar);
+      } else if (firstChar === DIFF_CONTEXT_PREFIX) {
+        // コンテキスト行（先頭スペース）
+        wrapDiffPrefix(node, firstChar);
+      }
+    }
+  };
+}
+
+/**
+ * 行の最初の文字（diff プレフィックス）を別の span 要素にラップする
+ * これにより CSS で user-select: none を適用可能になる
+ */
+function wrapDiffPrefix(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+lineNode, prefix) {
+  const line = lineNode;
+  if (!line.children || line.children.length === 0) return;
+  const firstChild = line.children[0];
+
+  // 最初の子要素がテキストノードの場合（実際には発生しないはずだが念の為）
+  if (firstChild.type === 'text' && firstChild.value.startsWith(prefix)) {
+    // プレフィックスを分離
+    const prefixSpan = {
+      type: 'element',
+      tagName: 'span',
+      properties: {
+        class: 'diff-prefix'
+      },
+      children: [{
+        type: 'text',
+        value: prefix
+      }]
+    };
+    firstChild.value = firstChild.value.slice(1);
+
+    // 空になった場合は削除
+    if (firstChild.value === '') {
+      line.children.shift();
+    }
+
+    // プレフィックス span を先頭に挿入
+    line.children.unshift(prefixSpan);
+    return;
+  }
+
+  // 最初の子要素が element（span など）の場合
+  if (firstChild.type === 'element' && firstChild.children && firstChild.children.length > 0) {
+    const innerFirst = firstChild.children[0];
+    if (innerFirst.type === 'text' && innerFirst.value.startsWith(prefix)) {
+      // プレフィックスを分離
+      const prefixSpan = {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          class: 'diff-prefix'
+        },
+        children: [{
+          type: 'text',
+          value: prefix
+        }]
+      };
+      innerFirst.value = innerFirst.value.slice(1);
+
+      // 空になった場合は削除
+      if (innerFirst.value === '') {
+        firstChild.children.shift();
+      }
+
+      // プレフィックス span を先頭に挿入
+      line.children.unshift(prefixSpan);
+    }
   }
-  if (hasDiff) return _prismCore.default.highlight(text, _prismCore.default.languages.diff, 'diff');
-  return _markdownIt.md.utils.escapeHtml(text);
 }
-function highlight(text, langName, hasDiff) {
-  const prismGrammar = _prismCore.default.languages[langName];
-  return highlightContent({
-    text,
-    prismGrammar,
-    langName,
-    hasDiff
+
+/**
+ * pre/code タグにクラスと属性を追加する transformer を作成
+ */
+function createClassTransformer(options) {
+  const {
+    className,
+    line
+  } = options;
+  return {
+    pre(node) {
+      if (className) {
+        this.addClassToHast(node, className);
+      }
+    },
+    code(node) {
+      this.addClassToHast(node, 'code-line');
+      if (className) {
+        this.addClassToHast(node, className);
+      }
+      if (line !== undefined) {
+        node.properties['data-line'] = line;
+      }
+    }
+  };
+}
+
+/**
+ * [Phase 2 の実処理] コードをハイライトする
+ *
+ * applyHighlighting() から各コードブロックに対して呼び出される。
+ * 言語が未ロードの場合は自動的にロードする（遅延ロード）。
+ * Shiki の transformers API を使用して AST レベルで変換を行う。
+ *
+ * @param text - ハイライト対象のコード文字列
+ * @param langName - 言語名（例: "javascript", "python"）
+ * @param options - ハイライトオプション
+ * @returns ハイライト済み HTML（常に <pre><code> 構造）
+ */
+async function highlight(text, langName, options) {
+  const {
+    hasDiff,
+    className,
+    line
+  } = options;
+  const highlighter = await getHighlighter();
+
+  // 言語がサポートされているか確認し、必要に応じてロード
+  const isSupported = langName ? await ensureLanguageLoaded(highlighter, langName) : false;
+
+  // サポートされていない言語は text（プレーンテキスト）として処理
+  // ref: https://shiki.style/languages#plain-text
+  const lang = isSupported ? langName : 'text';
+  if (!isSupported) {
+    await ensureLanguageLoaded(highlighter, 'text');
+  }
+
+  // transformers を構築
+  const transformers = [createClassTransformer({
+    className,
+    line
+  })];
+  if (hasDiff) {
+    transformers.push(createDiffTransformer());
+  }
+  return highlighter.codeToHtml(text, {
+    lang,
+    theme: SHIKI_THEME,
+    transformers
   });
 }