Web開発
27.5KBの言語非依存なWebGPUシンタックスハイライター
27.5KB language-agnostic WebGPU syntax highlighter (gpu-lexer.vercel.app)
要約
Vercel Labsが開発した、27.5KBという非常に軽量な言語非依存のWebGPUシンタックスハイライター「gpu-lexer」が発表されました。これは、WebGPUモデルを用いてソースコードを解析し、文脈を考慮してトークンをラベル付けすることで、文法定義なしに様々なプログラミング言語のシンタックスハイライトを実現します。従来のハイライターと比較して、実行速度が速く、バンドルサイズも小さいのが特徴です。
全文翻訳
27.5KBの言語非依存なWebGPUシンタックスハイライター
Shu Ding (Vercel Labs)
import { highlight } from 'gpu-lexer'
const spans = await highlight('source code')
// {
// type: 'plain' | 'comment' | 'string' | 'number' | 'keyword' | 'type' | 'function' | 'constant' | 'operator'
// start: number
// end: number
// }[]
gpu-lexerはソースコードを単語、空白、改行、記号といった単純な部分に分割します。その後、小さなWebGPUモデルがローカルコンテキストとファイル全体のコンテキストを組み合わせて、各部分にラベルを付けます。これはどの言語にも対応できるように設計されており、文法を選択する代わりに、学習中にその言語や構文を見たことがない場合でも、周囲のソースから各部分のタイプを推測します。隣接するラベルが、コードに返されるハイライトスパンになります。
これは実験であり、文法に相当するハイライターではありません。学習データに含まれていないファイルでは、現在のモデルのトークンラベルの12.57%がShikiと異なります。これはShikiとの一致度を測定したものであり、客観的な正しさではありません。未知の言語や実際のコードでは、さらに頻繁に異なる可能性があります。
10倍のthree.min.jsをハイライト
ブラウザでの実行時間 · 値が低いほど良い
0s 8.00s 16.0s 24.0s 32.0s
gpu-lexer 471.7ms
Sugar High 859.4ms
Prism.js 1.20s
Highlight.js 1.30s
Starry Night 11.1s
Shiki 30.4s
2026年9月8日に行われた、ウォームアップ後の単一ブラウザ実行。入力はthree.min.jsの10個の連結コピー（5.56M文字）でした。MacBook Pro, Apple M4 Pro, 20コアGPU, 24GB, macOS 26.6.2, Chrome 152。各エンジンは専用のワーカーで実行され、DOMレンダリングは除外されました。gpu-lexerとShikiはトークンデータを返し、Starry NightはHASTツリーを返し、Sugar High, Prism.js, Highlight.jsはハイライトされたHTMLを返しました。Sugar High 2.3.1, Prism.js 1.30.0, Highlight.js 11.12.0, Starry Night 3.11.0, Shiki 4.4.3。
ライブラリ読み込みサイズ
ランタイム + 選択された言語カバレッジ · 値が低いほど良い
0KB 390.6KB 781.3KB 1.14MB 1.53MB
Sugar High (主要6つのWeb言語) 5.4KB
Prism.js (主要6つのWeb言語) 8.6KB
Sugar High (全29言語) 8.8KB
Highlight.js (主要6つのWeb言語) 14.9KB
gpu-lexer (単一モデル) 27.5KB
Prism.js (全297言語) 162.1KB
Starry Night (主要6つのWeb言語) 185.3KB
Shiki (主要6つのWeb言語) 213.9KB
Highlight.js (全193言語) 240.4KB
Shiki (全242グラマー) 991.5KB
Starry Night (全710グラマー) 1.46MB
2026年9月8日に測定された、ミニファイおよびBrotli圧縮されたブラウザバンドル。主要なWeb言語には、javascript, typescript, css, html, json, markdownが含まれます。gpu-lexerは、すべての言語で同じバンドルを使用します。Starry Nightの合計には、Oniguruma WASMペイロードが含まれます。
トップ25の加重正しさ
人気で重み付けされたShikiとの一致度 · 値が高いほど良い
0% 25.00% 50.00% 75.00% 100%
Shiki 100%
gpu-lexer 90.20%
Prism.js 87.01%
Starry Night 85.07%
Highlight.js 84.65%
Sugar High 76.33%
Shikiは100%の正規化参照です。各ライブラリのトークン名は、plain, comment, string, number, keyword, type, function, constant, operatorの9つのクラスにマッピングされます。スコアは、GitHub Innovation Graphの2026-Q1トップ25に含まれる1,069個の保留されたファイル全体で、各言語のプッシャー数で重み付けされた非空白ソース部分を比較します。サポートされていない言語はゼロでスコア付けされ、コーパスサイズは重みに影響しません。
[ライブデモ]
75言語
react.development.js 0バイト
https://unpkg.com/react@19.2.8/cjs/react.development.js —