TL;DR

  • gpu-lexer는 학습에서 보지 못한 언어와 문법에도 적용되는 27.4KB WebGPU 기반 구문 강조기로, Shiki와의 토큰 라벨 일치율은 90.35%임.
  • 소스 코드를 단어·공백·줄바꿈·기호로 분할한 뒤 로컬 및 전체 파일 문맥을 결합해 각 부분의 유형을 추정함.
  • 5.56M자 입력 브라우저 벤치마크에서 402.0ms로 실행돼 Sugar High, Prism.js, Highlight.js, Starry Night, Shiki보다 빠름.
  • 모든 언어에 동일한 번들을 사용하며, 주요 웹 언어 6종과 전체 언어 지원 비교에서 27.4KB의 로드 크기를 기록함.
  • 문법 기반 하이라이터와 동등한 구현이 아닌 실험이며, 학습에서 제외된 파일의 현재 모델 라벨 중 11.98%가 Shiki와 다름.

gpu-lexer: 언어와 무관한 WebGPU 구문 강조기

  • Vercel Labs의 Shu Ding이 27.4KB 규모의 언어 독립적(language-agnostic) WebGPU 구문 강조기 gpu-lexer를 소개함.
  • parse 함수에 소스 코드를 전달하면 각 구간의 시작 위치와 끝 위치, 유형을 담은 구문 스팬(span) 배열을 반환함.
  • 반환되는 유형은 plain, comment, string, number, keyword, type, function, constant, operator임.
  • gpu-lexer는 소스 코드를 단어, 공백, 줄바꿈, 기호 같은 단순한 부분으로 분할함.
  • 이후 작은 WebGPU 모델이 로컬 문맥과 전체 파일 문맥을 결합해 각 부분에 유형을 부여함.
  • 문법(grammar)을 선택하는 대신 주변 소스를 바탕으로 각 부분의 유형을 추정하므로, 학습 과정에서 해당 언어나 문법을 접하지 않은 경우에도 적용되는 구조임.
  • 인접한 라벨을 결합해 애플리케이션에 반환할 구문 스팬을 생성함.
  • 문법과 동등한 하이라이터가 아닌 실험적 구현임.
  • 학습에서 제외된 파일에서 현재 모델의 토큰 라벨 중 11.98%가 Shiki와 다름.
  • 이 수치는 객관적인 정답이 아니라 Shiki와의 일치율을 측정한 값이며, 학습에 포함되지 않은 언어나 실제 코드는 더 자주 달라질 가능성이 있음.

브라우저 성능: three.min.js 10회 입력

  • 낮을수록 좋은 조건에서 three.min.js를 10회 연결한 5.56M자 입력을 구문 강조함.
  • 측정 결과는 다음과 같음.
  • gpu-lexer: 402.0ms
  • Sugar High: 836.2ms
  • Prism.js: 1.16초
  • Highlight.js: 1.29초
  • Starry Night: 11.0초
  • Shiki: 29.6초
  • 측정 환경은 2026년 9월 9일 한 차례 워밍업 후 실행한 브라우저 테스트 1회임.
  • 하드웨어와 소프트웨어 환경은 MacBook Pro, Apple M4 Pro, 20코어 GPU, 24GB 메모리, macOS 26.6.2, Chrome 152임.
  • 각 엔진은 전용 워커(worker)에서 실행했으며, 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임.

라이브러리 로드 크기와 언어 지원 범위

  • 브라우저 번들의 축소 및 Brotli 압축 크기를 2026년 9월 9일 측정함.
  • 주요 웹 언어 6종은 JavaScript, TypeScript, CSS, HTML, JSON, Markdown임.
  • gpu-lexer는 모든 언어에 동일한 번들을 사용함.
  • 비교 결과는 다음과 같음.
  • Sugar High — 주요 웹 언어 6종: 5.4KB
  • Prism.js — 주요 웹 언어 6종: 8.6KB
  • Sugar High — 전체 29개 언어: 8.8KB
  • Highlight.js — 주요 웹 언어 6종: 14.9KB
  • gpu-lexer — 모델 1개: 27.4KB
  • Prism.js — 전체 297개 언어: 162.1KB
  • Starry Night — 주요 웹 언어 6종: 185.3KB
  • Shiki — 주요 웹 언어 6종: 213.9KB
  • Highlight.js — 전체 193개 언어: 240.4KB
  • Shiki — 전체 242개 문법: 991.5KB
  • Starry Night — 전체 710개 문법: 1.46MB
  • Starry Night의 전체 크기에는 Oniguruma WASM 페이로드가 포함됨.

상위 25개 언어의 가중 일치율

  • Shiki와의 인기도 가중 일치율을 비교하며, 높을수록 좋은 조건임.
  • Shiki를 100% 정규화 기준으로 삼고 각 라이브러리의 토큰 이름을 plain, comment, string, number, keyword, type, function, constant, operator의 동일한 9개 클래스로 매핑함.
  • 공백이 아닌 소스 부분을 대상으로 2026년 1분기 GitHub Innovation Graph 상위 25개 언어의 학습 보류 파일 1,103개를 비교함.
  • 가중치는 각 언어의 푸셔 수(pusher count)를 기준으로 하며, 말뭉치 크기는 가중치에 영향을 주지 않음.
  • 지원하지 않는 언어의 점수는 0점으로 계산함.
  • 결과는 다음과 같음.
  • Shiki: 100%
  • gpu-lexer: 90.35%
  • Prism.js: 86.93%
  • Highlight.js: 84.31%
  • Starry Night: 81.89%
  • Sugar High: 75.93%

라이브 데모

  • 75개 언어를 지원하는 라이브 데모가 제공됨.
  • 대상 파일은 react.development.js이며, 표시된 입력 크기는 0바이트임.