Add GLSL syntax highlighting in code examples#455
Conversation
- Prism hook detects GLSL inside template literals and re-tokenizes with glsl grammar - GLSL blocks get a subtle dark background spanning full line width - Imports prism-c + prism-glsl as dependencies Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds GLSL-aware syntax highlighting to the cookbook’s Prism-rendered TSX/JSX source views, aiming to make GLSL\...`` shader blocks stand out visually inside code examples.
Changes:
- Introduces a Prism
after-tokenizehook to re-tokenize template literal string content as GLSL. - Wires the hook into the example detail source renderer.
- Adds global CSS to give detected GLSL blocks a full-width subtle dark background.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/cookbook-v2/src/utils/prismGlslTemplate.ts | Adds Prism hook + GLSL re-tokenization logic for template strings. |
| packages/cookbook-v2/src/pages/ExampleDetailPage.tsx | Imports the Prism GLSL hook alongside existing Prism language/theme setup. |
| packages/cookbook-v2/src/index.css | Styles .token.glsl-block with a background and full-width layout treatment. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (token.type === "template-string") { | ||
| tryHighlightGlsl(token); | ||
| } | ||
| if (Array.isArray(token.content)) { | ||
| walkTokens(token.content); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function tryHighlightGlsl(token: Prism.Token) { | ||
| const content = token.content; | ||
| if (!Array.isArray(content)) return; | ||
|
|
||
| // Find the string part inside the template-string | ||
| for (let i = 0; i < content.length; i++) { | ||
| const part = content[i]; | ||
| if (typeof part !== "string" && part.type === "string" && typeof part.content === "string") { | ||
| // Heuristic: check if it looks like GLSL | ||
| if (!/void\s+main\s*\(|gl_FragColor|precision\s+\w+p\s+float|out\s+vec4/.test(part.content)) continue; | ||
| // Re-tokenize as GLSL and mark the token | ||
| part.content = Prism.tokenize(part.content, Prism.languages.glsl); | ||
| part.type = "glsl-block"; |
There was a problem hiding this comment.
The implementation highlights any TSX/JSX template string that matches a GLSL-looking regex, but it does not actually verify that the template literal is tagged with GLSL (as stated in the PR description). This can both (1) miss real GLSL\...`blocks that don’t match the heuristic and (2) incorrectly re-tokenize non-GLSL template strings that happen to contain these keywords. Consider detecting theGLSLtag explicitly (e.g., by checking the token immediately preceding thetemplate-stringtoken, or by extending the Prism grammar to emit a dedicated token forGLSL`...`` tagged templates) instead of relying on content heuristics.
| import "prismjs/components/prism-jsx"; | ||
| import "prismjs/components/prism-tsx"; | ||
| import "prismjs/themes/prism-tomorrow.css"; | ||
| import "../utils/prismGlslTemplate"; |
There was a problem hiding this comment.
This adds new syntax-highlighting behavior, but there’s no automated coverage asserting that GLSL blocks are detected and rendered (e.g., a span.token.glsl-block appears in the highlighted code). Since the package already has Playwright e2e tests for example pages, it would be good to add a small assertion on one example detail page to prevent regressions in the Prism hook/CSS integration.
| .token.glsl-block { | ||
| background: rgba(0, 0, 0, 0.25); | ||
| border-radius: 3px; | ||
| display: block; | ||
| margin: 0 -1rem; | ||
| padding: 0.25rem 1rem; | ||
| } |
There was a problem hiding this comment.
The margin: 0 -1rem / padding: 0.25rem 1rem styling hard-codes an assumed code-block horizontal padding of 1rem. This is brittle if code blocks are ever rendered with different padding (it can cause misalignment or unexpected horizontal overflow). Consider scoping this rule to the specific code container that uses p-4, or using a CSS custom property so the background “full-width” effect tracks the actual container padding.
Summary
rgba(0,0,0,0.25)background spanning the full line width, visually separating shader code from JS/TSXprism-c(dependency ofprism-glsl), both already bundled in prismjsTest plan
yarn vite build— builds successfullyvec4,uniform,sampler2D,main) are colored🤖 Generated with Claude Code