NPMパッケージで`@lexical/code`の組み込み言語が読み込まれない問題を修正

2026年04月10日 05:43 JST basecamp/lexxy

https://github.com/basecamp/lexxy/pull/964

NPMパッケージとしてhighlightCodeをインポートした際、@lexical/codeが標準で提供するシンタックスハイライト言語が読み込まれないバグが修正されました。あわせてKotlinのサポートも追加されています。

背景

gemとして使用する場合はモノバンドルに全言語インポートが含まれるため問題が表面化していませんでしたが、NPMパッケージ経由では@lexical/codeが前提とするPrism言語グラマーが欠落する状態でした。@lexical/codeはコードハイライト機能の内部で、JavaScript・TypeScript・Python・Rustなど多数のグラマーを前提として動作します。これらがsrc/config/prism.jsに明示的にインポートされていなかったため、NPMパッケージ利用者にはハイライトが機能しないケースが生じていました。

技術的な変更

src/config/prism.jsに@lexical/codeが標準で扱う言語グラマーのインポートが追加されました。Prismのグラマーは相互に依存して拡張し合う構造を持つため、読み込み順序が重要です。追加されたインポート群はその依存順を考慮して並べられており、コメントで「Don't reorder: they extend each other」と明示されています。

変更前:

import Prism from "prismjs"

// Import base language dependencies first
import "prismjs/components/prism-clike"
import "prismjs/components/prism-markup"
import "prismjs/components/prism-markup-templating"

// Import languages
import "prismjs/components/prism-ruby"
import "prismjs/components/prism-php"
import "prismjs/components/prism-go"
import "prismjs/components/prism-bash"
import "prismjs/components/prism-json"
import "prismjs/components/prism-diff"

変更後:

import Prism from "prismjs"
// Prism and base @lexical/code languages
// Don't reorder: they extend each other
import "prismjs/components/prism-clike"
import "prismjs/components/prism-diff"
import "prismjs/components/prism-javascript"
import "prismjs/components/prism-markup"
import "prismjs/components/prism-markdown"
import "prismjs/components/prism-c"
import "prismjs/components/prism-css"
import "prismjs/components/prism-objectivec"
import "prismjs/components/prism-sql"
import "prismjs/components/prism-powershell"
import "prismjs/components/prism-python"
import "prismjs/components/prism-rust"
import "prismjs/components/prism-swift"
import "prismjs/components/prism-typescript"
import "prismjs/components/prism-java"
import "prismjs/components/prism-cpp"

// Import extra base language dependencies
import "prismjs/components/prism-markup-templating"

// Import extra languages
import "prismjs/components/prism-ruby"
import "prismjs/components/prism-php"
import "prismjs/components/prism-go"
import "prismjs/components/prism-bash"
import "prismjs/components/prism-json"
import "prismjs/components/prism-kotlin"

変更前はdiffが「extra languages」セクションの末尾にありましたが、変更後は@lexical/codeのベース言語群の一部として冒頭に移動しています。またこれまでdiffがあったスロットにはKotlinが追加されました。同時にsrc/elements/code_language_picker.jsにもlanguages.kotlin ||= "Kotlin"が追加されており、UIのピッカーにKotlinが表示されるようになっています。

設計判断

言語インポート群を「@lexical/codeのベース言語」と「拡張言語」の2グループに明確に分離する構成が採られました。コメントによるセクション区切りと順序の固定指示を設けることで、今後のメンテナー向けに「ライブラリ由来の必須セット」と「lexxy独自の追加セット」の意図を伝える設計になっています。Prismのグラマーは拡張チェーンを持つため（例: cppはcに依存）、順序の誤りが無音の機能不全を引き起こしやすい。コメントと区分けによってそのリスクを明示化した判断といえます。

テスト側でもtest/javascript/unit/helpers/code_highlighting_helper.test.jsに期待される言語グラマーがすべてロードされているかを確認するテストが追加され、意図しないグラマーの欠落を検出する仕組みが導入されています。

まとめ

本PRは、gemとNPMという2つの配布形態の差異によって隠蔽されていたグラマー欠落バグを修正した変更です。@lexical/codeが前提とする言語セットを明示的にインポートし、コメントで順序依存を宣言する構成にしたことで、今後の言語追加時に同様の問題を防ぐ基盤が整いました。