Code blocks

Code blocks are highlighted at build time with Shiki, using a light and a dark theme that follow the site color scheme. No highlighting code is sent to the browser.

Add title="..." after the language to show a file name.

export function greet(name: string) {
  return `Hello, ${name}!`;
}

Add // [!code highlight] at the end of a line, or list line numbers in the meta, like {1,3-4}.

const answer = 42;
const question = 'What is the meaning of life?';
console.log(question, answer);

Use // [!code word:name] to highlight every occurrence of a word in the following line.

const config = defineConfig({ site: 'https://example.com' });
export default config;

Mark added and removed lines with // [!code ++] and // [!code --].

export default defineConfig({
  integrations: [
    starlight({ title: 'My Docs' }),
    zenith({ title: 'My Docs' }),
  ],
});

Blur everything but the important lines with // [!code focus]. Hover the block to reveal the rest.

import { defineCollection } from 'astro:content';
import { docsLoader, docsSchema } from 'zenith-docs/content';

export const collections = {
  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), 
};

Add lineNumbers to the meta, optionally with a starting number: lineNumbers=10.

:root {
  --brand-500: oklch(58% 0.18 268);
  --radius-main: 0.625rem;
}

Every code block gets a copy button, shown on hover. It is only rendered when JavaScript is available.