Code block themes

Code is highlighted with Shiki using a dual theme, one for light, one for dark, configured in mdsvex.config.js.

const themes = { light: 'github-light', dark: 'vesper' };

Pick any bundled Shiki theme for each side:

const themes = { light: 'min-light', dark: 'github-dark-default' };

Block background

Shiki inlines each theme’s own background, but Axerity overrides it with the --surface-raised token so code blocks match cards and panels. That rule is in src/routes/layout.css:

.doc-content pre.shiki {	background-color: var(--surface-raised) !important;}

Remove the override if you’d rather keep the Shiki theme’s native background.

Languages

Grammars are preloaded in mdsvex.config.js. Add any language you use:

const langs = ['svelte', 'typescript', 'javascript', 'json', 'bash', 'css', 'python'];

Unlisted languages fall back to plain text.

Fence options

Authors get titles, line highlighting, and line numbers out of the box:

```ts title="example.ts" {2} showLineNumbersconst a = 1;const b = 2; // highlighted```