Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-08-25 18:25:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(website): align raw markdown code blocks with prototype styling

Browse Source 
Astro's default Shiki config bakes in the fixed 'github-dark' theme's
literal colors, ignoring the site's actual light/dark mode - this made
plain markdown-fenced code blocks (as opposed to the prototype's own
SyntaxHighlightedCode component) always render a hardcoded dark box
regardless of theme.

Switch shikiConfig to the 'css-variables' theme so highlighted tokens
resolve through --astro-code-* custom properties instead, then map
those to the same brand color tokens the prototype's codeBlock uses
(canvas-subtle background, border-muted border, brand text/link/accent
colors for tokens). Raw markdown code blocks now match the prototype's
bordered, canvas-subtle surface in both color modes.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 80686fef-efe3-4cdd-8cd6-bfa61a5d0af6
This commit is contained in:
Aaron Powell
2026-08-17 11:47:52 +10:00
parent cc3c5aad2a
commit 8d31163c00
3 changed files with 85 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/astro.config.mjs
+13
View File
@@ -27,6 +27,19 @@ export default defineConfig({
remarkPlugins: [
[remarkGithubAdmonitionsToDirectives, { mapping: githubAdmonitionMapping }],
],
// The prototype's own code blocks (SyntaxHighlightedCode.tsx) are styled
// entirely through brand CSS tokens rather than baked-in theme colours, so
// they automatically match the site's light/dark mode. Raw markdown code
// fences render through Shiki instead, which by default bakes a fixed
// "github-dark" theme's literal colours into inline styles — that ignores
// the site's actual colour mode and clashes with the prototype's bordered,
// canvas-subtle code block styling. The "css-variables" theme emits
// `var(--astro-code-*)` custom properties instead of literal colours,
// which are mapped to the same brand tokens in
// src/components/brand/styles/{dotnet-upgrade,github-copilot-app}.module.css.
shikiConfig: {
theme: "css-variables",
},
},
// English is served at the site root (no locale prefix), preserving all
// existing URLs. Additional locales are served under a locale prefix