perf: Remove HTML parsing, instead sanitize and set dangerously #521
Conversation
This file contains 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
- Create `shikiTransformers.ts` with `removeTabIndexFromPre` transformer - Passes `node` prop to `pre()` transformer hook to set the tabindex to -1 on shiki generated pre elements
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
from
a52bbb9 to
1ea2c19
Compare
AVGVSTVS96
force-pushed
the
customThemeShikiPerformance
branch
from
93095bd to
d6da82e
Compare
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
3 times, most recently
from
fdee84e to
fef7127
Compare
AVGVSTVS96
force-pushed
the
customThemeShikiPerformance
branch
from
d6da82e to
20bb6ef
Compare
Create a hook to highlight code using custom theme and a highlighter created with that custom theme
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
from
fef7127 to
9794f7a
Compare
AVGVSTVS96
force-pushed
the
customThemeShikiPerformance
branch
from
0fa056b to
b2dd1b5
Compare
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
from
b02b48a to
b618f9e
Compare
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
from
b618f9e to
46bebe1
Compare
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
4 times, most recently
from
04272be to
482374e
Compare
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
from
482374e to
a2b538c
Compare
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
2 times, most recently
from
69822e9 to
df6a518
Compare
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
from
df6a518 to
bd71619
Compare
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
from
bd71619 to
d9edfc5
Compare
Add optional debouncing when debouncMs is passed to hook Set 150ms in CodeHighlight for testing
Parsing HTML to React elements is a performance bottleneck which slows down code block rendering. This change removes the parsing and instead sanitizes the HTML with DOMPurify, and sets it with `dangerouslySetInnerHTML` Also, this HTML processing logic is moved from `CodeHighlight` to `useShiki`, this way the hook always returns sanitized HTML, and logic is centralized.
AVGVSTVS96
force-pushed
the
customThemeShikiPerformance
branch
from
b2dd1b5 to
7db85ab
Compare
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
3 times, most recently
from
1fd7bf4 to
8423cae
Compare
This was referenced Jan 28, 2025
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
2 times, most recently
from
46b30c5 to
9a0d291
Compare
AVGVSTVS96
force-pushed
the
customThemeShiki
branch
6 times, most recently
from
4d0067e to
ba7ae7a
Compare
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.
Parsing HTML to React elements is a performance bottleneck which slows down code block rendering. This change removes the parsing and instead sanitizes the HTML with DOMPurify, and sets it with
dangerouslySetInnerHTMLAlso, this HTML processing logic is moved from
CodeHighlighttouseShiki, this way the hook always returns sanitized HTML, and logic is centralized.