feat(web): syntax highlighting for blog MDX + SDK showcase (SQLR-44)#121
Merged
feat(web): syntax highlighting for blog MDX + SDK showcase (SQLR-44)#121
Conversation
Wire rehype-pretty-code + Shiki into the MDXRemote pipeline in web/src/components/blog-mdx.tsx and map Shiki's --shiki-token-* CSS variables onto the blog's existing palette tokens in globals.css so themes stay coherent. Inline code keeps its chip styling (bypassInlineCode) and unlanguaged fences fall back to plaintext. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pre-render the six SDK snippets with shiki at build time and ship the resulting HTML to the existing client-side tab switcher. The shiki theme (createCssVariablesTheme) and helper move to a shared src/lib/highlight.ts so the blog MDX and the landing page reuse the same --shiki-token-* → palette mapping. The .code-body rule in globals.css declares the same shiki var mapping the blog does. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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
rehype-pretty-code+ Shiki into the blog MDX renderer so fenced code blocks tokenize at build time. Inline`code`keeps its existing chip styling; fences without a language fall back toplaintextso a missing tag never breaks the build.highlightCode()and a small client wrapper that owns tab state.createCssVariablesThemeso Shiki emits inline styles likecolor: var(--shiki-token-keyword). The mapping from--shiki-*to the existing palette tokens (--color-kw,--color-str,--color-num, …) lives inglobals.css(.blog-article-body preand.code-body) — adjust colors there, not in components.web/src/lib/highlight.ts; README updated to point future readers at the right files.Test plan
npm run typecheck— cleannpm run lint— cleannpm run build— 14.79s wall (baseline 15.88s, no regression). Static HTML contains shiki token spans on/blog/<slug>pages and the active rust snippet on/. The other five SDK tabs' highlighted HTML is in the RSC payload, so client-side tab switching is instant.Out of scope
Line numbers, copy buttons, language label chips. Tracked separately as a UX follow-up.
🤖 Generated with Claude Code