Code Blocks

Fenced code blocks are written with triple backticks and a language hint, then highlighted with Shiki, light and dark themes follow your color scheme automatically.

Basic

```tsconst greeting: string = 'Hello, Axerity';console.log(greeting);```

Renders as:

const greeting: string = 'Hello, Axerity';console.log(greeting);

Hover any block to reveal the copy button in the corner.

Titles

Add title="…" after the language to render a filename header bar:

```ts title="hello.ts"export function hello(name: string) {	return `Hello, ${name}`;}```

hello.ts

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

Line highlighting

Add a {…} range to emphasize specific lines, single lines, comma lists, and ranges all work:

```ts title="server.ts" {2,4-6}import { createServer } from 'node:http';const server = createServer((req, res) => {	res.writeHead(200);	res.end('Hello from Axerity');});server.listen(3000);```

server.ts

import { createServer } from 'node:http';const server = createServer((req, res) => {	res.writeHead(200);	res.end('Hello from Axerity');});server.listen(3000);

Line numbers

Add showLineNumbers to number every line, it combines with titles and highlighting:

```ts showLineNumbers {3}function fib(n) {	if (n < 2) return n;	return fib(n - 1) + fib(n - 2);}```

function fib(n) {	if (n < 2) return n;	return fib(n - 1) + fib(n - 2);}

Type hovers with Twoslash

Add twoslash to a TypeScript block to run it through the compiler at build time. Tokens gain real type information you can hover, and a ^? comment pops the type of whatever sits above the caret:

```ts twoslashconst user = {	name: 'Ada',	id: 1};user.name;//   ^?```

const const user: {
    name: string;
    id: number;
}user = {	name: stringname: 'Ada',	id: numberid: 1};const user: {
    name: string;
    id: number;
}user.
name: stringname;

The code has to type check, so a Twoslash block doubles as a test that your examples still compile.

Svelte

Svelte is highlighted too, including the <script> block, markup, and bindings:

```svelte<script lang="ts">	let count = $state(0);</script><button onclick={() => count++}>	clicked {count} times</button>```

<script lang="ts">	let count = $state(0);</script><button onclick={() => count++}>	clicked {count} times</button>