Skip to content

fix: restore Shiki syntax highlighting for reused token colors#573

Merged
brendanjryan merged 4 commits intomainfrom
brendan/fix-shiki-code-highlighting
Apr 15, 2026
Merged

fix: restore Shiki syntax highlighting for reused token colors#573
brendanjryan merged 4 commits intomainfrom
brendan/fix-shiki-code-highlighting

Conversation

@brendanjryan
Copy link
Copy Markdown
Collaborator

@brendanjryan brendanjryan commented Apr 15, 2026

Summary

Fixes a bug which resulted in styles being dropped due to a shiki optimization

  • make each highlighted code block emit the Shiki color rules it actually uses
  • keep shared class reuse, but stop page rendering from depending on a rule first emitted by some other page
  • add a regression test for later code blocks that reuse an existing token color

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 15, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
mpp Ready Ready Preview, Comment Apr 15, 2026 11:07pm

Request Review

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a18cac5401

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +168 to +171
const css = Array.from(
blockRules,
([cls, style]) => `.${cls}{${style}}`,
).join("");
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Canonicalize emitted rule order before joining CSS

The new data-shiki-css generation uses blockRules insertion order, which depends on the first token color encountered in each block. Two blocks that use the same set of classes in different token orders therefore emit different CSS strings, and the runtime dedupe (seen.has(css) in injectShikiColors) no longer collapses them. In pages with many code blocks or after client-side navigation, this causes repeated duplicate rules to accumulate in the shared <style> tag and degrades render performance; sorting by class name (or deduping per rule) before join keeps dedupe effective.

Useful? React with 👍 / 👎.

@brendanjryan brendanjryan merged commit be2b19a into main Apr 15, 2026
10 checks passed
@brendanjryan brendanjryan deleted the brendan/fix-shiki-code-highlighting branch April 15, 2026 23:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant