Replace CodeMirror/Lezer syntax highlighting with Shiki#12808
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
mtsgrd
force-pushed
the
shiki-highlighter-integration
branch
from
270558e to
6adea0a
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates UI diff/code-block syntax highlighting from CodeMirror/Lezer-based token classes to a Shiki-based highlighter, aiming to reduce dependency surface and support theme-aware highlighting via Shiki themes.
Changes:
- Replaced CodeMirror parser/highlight pipeline in
diffParsing.tswith Shiki tokenization and new caching logic. - Added a Shiki highlighter singleton with theme-change observation and language/filename mapping.
- Removed the old token-class-based syntax CSS and dropped CodeMirror/Lezer-related dependencies (adding
shiki).
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Updates lockfile for removal of CodeMirror/Lezer deps and addition of Shiki deps. |
| packages/ui/src/styles/sharable/syntax-highlighting.css | Removes syntax token class styling; keeps only word-diff highlighting styles. |
| packages/ui/src/lib/utils/shikiHighlighter.ts | Introduces Shiki singleton highlighter, theme detection, and language mapping/tokenization helpers. |
| packages/ui/src/lib/utils/diffParsing.ts | Switches diff tokenization from CodeMirror highlight tree to Shiki tokens + language-keyed caches. |
| packages/ui/src/lib/components/hunkDiff/HunkDiffBody.svelte | Recomputes diff rows when Shiki becomes ready or theme changes. |
| packages/ui/package.json | Removes CodeMirror/Lezer-related dev deps and adds shiki. |
| apps/web/src/lib/components/chat/MessageCode.svelte | Recomputes chat code rendering when Shiki becomes ready or theme changes. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
You can also share your feedback on Copilot code review. Take the survey.
mtsgrd
force-pushed
the
shiki-highlighter-integration
branch
from
6adea0a to
3b2d45c
Compare
Replace the custom CodeMirror/Lezer-based syntax highlighting in the diff view with Shiki, which uses TextMate grammars (same as VS Code) for better language coverage and highlighting quality. Key changes: - Add shikiHighlighter.ts module that manages a singleton Shiki highlighter with lazy async initialization and DOM-based theme detection (github-light/github-dark matched to the app's light/dark mode). - Refactor diffParsing.ts to use Shiki's tokenizer instead of CodeMirror parsers, with language ID string caches replacing the old WeakMap<Parser> caches. - Observe <html> class mutations so highlighting caches are cleared and components re-render when the app theme toggles. - Map .svelte and .vue to TypeScript for line-by-line highlighting, since their SFC grammars require full-file context. - Remove 24 @codemirror/* and @lezer/* dependencies in favor of the single shiki package.
mtsgrd
force-pushed
the
shiki-highlighter-integration
branch
from
3b2d45c to
d2ebcd5
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 9 changed files in this pull request and generated 4 comments.
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
You can also share your feedback on Copilot code review. Take the survey.
mtsgrd
added a commit
that referenced
this pull request
Mar 12, 2026
…tion Replace CodeMirror/Lezer syntax highlighting with Shiki
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replace the custom CodeMirror/Lezer-based syntax highlighting in the
diff view with Shiki, which uses TextMate grammars (same as VS Code)
for better language coverage and highlighting quality.
Key changes:
highlighter with lazy async initialization and DOM-based theme
detection (github-light/github-dark matched to the app's light/dark
mode).
CodeMirror parsers, with language ID string caches replacing the
old WeakMap caches.
and components re-render when the app theme toggles.
since their SFC grammars require full-file context.
single shiki package.
After:
Before:
After:
Before:
