Repository navigation
Use @pierre/highlights for syntax - #1125
Merged
stipsan merged 4 commits intoNov 11, 2026
Merged
Conversation
…lighting Co-authored-by: tembo[bot] <208362400+tembo-io[bot]@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…ighlight-pierre-highlights-mwcc5c1l Co-authored-by: Cody <81981+stipsan@users.noreply.github.com>
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Every snippet variant is formatted with oxfmt (via vite-plus/fmt) when the page is built, at 40 columns with no semicolons, and passed to the islands as props. Prettier is no longer shipped to the browser. The code font scales down on narrow screens so 40 columns fit on phones. Co-authored-by: tembo[bot] <208362400+tembo-io[bot]@users.noreply.github.com>
Code.astro formats and highlights every variant of an example's snippet at build time and slots them into the React island as static HTML. Example.CodeBody only toggles which variant is visible, so neither oxfmt nor the Pierre highlighter (and its WASM) ship to the browser. Co-authored-by: tembo[bot] <208362400+tembo-io[bot]@users.noreply.github.com>
stipsan
deleted the
tembo/update-syntax-highlight-pierre-highlights-mwcc5c1l
branch
November 11, 2026 17:47
This branch was successfully deployed
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.
Summary
Switch the website's syntax highlighting from
refractor/react-refractorto@pierre/highlights, and format and highlight the code snippets at build time.Code.astroformats every variant of an example's snippet with oxfmt (throughvite-plus/fmt) and highlights it with Pierre's Dracula theme. All of this happens at build time. The variants are slotted into each React island as static HTML.Example.CodeBodyshows the variant whosedata-snippetmatches the selected options. React no longer formats or highlights anything.src/components/snippets.tsholds each example's snippet template, its initial options, and every option combination (32 variants in total).es5trailing commas, 40 columns so snippets fit on phones. The code font also scales down slightly (between 11px and 14px) on narrow screens so 40 columns fit without scrolling.refractor,react-refractor, the Prettier snippet formatting (utils.ts) and the Prism token styles inglobal.css.Notes
mainto 43 KB (the React client runtime). Prettier, oxfmt and Pierre's WASM no longer ship to the browser. The full page, including all 32 pre-rendered snippet variants, is ~18 KB gzipped.@pierre/highlights@0.5.1is newer than the repo'sminimumReleaseAge, so it's listed inminimumReleaseAgeExcludeinpnpm-workspace.yaml. Remove that line if you'd rather wait.import … from '…-scroll-into-view-if-needed'lines are longer than 40 columns, because module paths can't be wrapped. Those lines scroll horizontally on phones.Testing
vp check,pnpm typecheckandpnpm buildpass.