Skip to content

Add GLSL syntax highlighting in code examples #455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gre merged 1 commit into from
Mar 20, 2026
Merged

Add GLSL syntax highlighting in code examples #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/cookbook-v2/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,13 @@
}
}

/* GLSL blocks inside template strings get a subtle dark bg across full width */
.token.glsl-block {
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
display: block;
margin: 0 -1rem;
padding: 0.25rem 1rem;
}
Comment on lines +38 to +44

Copilot AI Mar 20, 2026

Copy link

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.


1 change: 1 addition & 0 deletions packages/cookbook-v2/src/pages/ExampleDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import "prismjs/components/prism-typescript";
import "prismjs/components/prism-jsx";
import "prismjs/components/prism-tsx";
import "prismjs/themes/prism-tomorrow.css";
import "../utils/prismGlslTemplate";

Copilot AI Mar 20, 2026

Copy link

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
import { examples } from "../examples";
import { ControlsPanel, getDefaults } from "../controls";
import { Breadcrumb } from "../components/Breadcrumb";
Expand Down
39 changes: 39 additions & 0 deletions packages/cookbook-v2/src/utils/prismGlslTemplate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import Prism from "prismjs";
import "prismjs/components/prism-c";
import "prismjs/components/prism-glsl";

// Highlight GLSL inside tagged template literals (GLSL`...`)
Prism.hooks.add("after-tokenize", (env) => {
if (env.language !== "tsx" && env.language !== "jsx") return;
walkTokens(env.tokens);
});

function walkTokens(tokens: (string | Prism.Token)[]) {
for (let i = 0; i < tokens.length; i++) {
const token = tokens[i];
if (typeof token === "string") continue;
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";
Comment on lines +15 to +36

Copilot AI Mar 20, 2026

Copy link

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
}
}
}
Loading