From b27811d9216b94f263a71cd423f8675f1c4bfa1c Mon Sep 17 00:00:00 2001 From: Luke Curley Date: Wed, 21 Oct 2026 17:08:20 -0700 Subject: [PATCH] Theme code blocks to match the site MDX blocks used Shiki's github-dark, a flat grey that clashed with the navy page, while the publish/watch embeds used highlight.js's atom-one-dark. Both now read one palette of --astro-code-* variables in global.css: green keywords and tags, amber strings, sky constants, violet functions, on slate-950. Block code also rendered at 10.8px because the inline-code em size and prose-lg's code size compounded on top of the pre's own size. Blocks are now 14px, with 4-wide tabs and a thin slate scrollbar. Co-Authored-By: Claude Opus 5.5 --- astro.config.ts | 9 ++++++ bun.lock | 1 + package.json | 1 + src/layouts/global.astro | 3 -- src/layouts/global.css | 65 ++++++++++++++++++++++++++++++++++------ tailwind.config.cjs | 2 +- 6 files changed, 68 insertions(+), 13 deletions(-) diff --git a/astro.config.ts b/astro.config.ts index d0f0803..e05dc2d 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -4,11 +4,20 @@ import mdx from "@astrojs/mdx"; import solidJs from "@astrojs/solid-js"; import tailwind from "@astrojs/tailwind"; import { defineConfig } from "astro/config"; +import { createCssVariablesTheme } from "shiki"; + +// Colors come from the --astro-code-* variables in global.css, shared with highlight.js. +const codeTheme = createCssVariablesTheme({ variablePrefix: "--astro-code-" }); +// The stock theme paints HTML tag names like quoted strings, so `