Fullmoon Syntactic Code Highlighter：安全なコード表示の設計ノート

TextMate文法によるトークン化と安全なDOM出力を区別し、長いコードの描画コストを制限するハイライターの設計です。

1. トークン化と画面出力を区別する

この文書はコードハイライターの設計ノートです。TextMate文法はコードにスコープを付与するトークン化の規則であり、言語の意味を完全に理解するASTパーサーとは異なります。Onigurumaは正規表現エンジンなので、WebAssemblyで動かしても正規表現の処理がなくなるわけではありません。vscode-textmateとvscode-onigurumaの役割を区別します。

2. 安全な基本表示

以下は構文ハイライターではなく、トークン化を利用できない場合に原文を安全に表示するための基本的な出力例です。入力コードをHTML文字列へそのまま挿入せず、textContentへ代入します。textContentのドキュメントを参照してください。

/* typescript */
export function renderPlainCode(container: HTMLElement, source: string): void {
  const pre = document.createElement("pre");
  const code = document.createElement("code");
  code.textContent = source;
  pre.append(code);
  container.replaceChildren(pre);
}

トークン化に成功したら、許可されたテーマクラスとテキストノードでspanを構成します。文法やテーマの読み込みに失敗しても、上記のような基本表示でコードを読める必要があります。

3. 長いコードの処理と検証

• 言語別の文法とWebAssemblyは必要なときに読み込み、エラーを処理します。
• トークン化とDOM生成のコストを別々に測定し、長い入力には処理の分割や仮想化を検討します。
• HTMLタグに見える入力、非常に長い1行、不正な構文、複数言語が混在する文書を検証します。
• 固定の高速化倍率やフレームレートを保証せず、コードサイズ、言語、端末の条件を記録した結果から性能を評価します。