Code Blocks

Display syntax-highlighted code using the codeblock function. Highlighting is powered by Shiki.

Basic Usage

codeblock { language = typescript, "const x = 42" }

const x = 42

Multi-line Code

Single quotes work for multi-line code, too:

codeblock { language = typescript, "function greet(name: string) {
  return \\"Hello, \\" + name
}

greet(\\"World\\")" }

Alternatively, you can wrap your code samples in multiple quotes so you don't have to use \ for escaping:

codeblock { language = typescript, """function greet(name: string) {
  return "Hello, " + name
}

greet("World")""" }

function greet(name: string) {
  return "Hello, " + name
}

greet("World")

The number of starting and ending quotes doesn't matter, as long as they match.

Loading Code from Files

Use readfile to load source code from external files instead of embedding it:

codeblock { language = csv, readfile { src = sample-data.csv } }

This keeps your documentation in sync with actual source files. The path is relative to the .tiramisu file.

Language Icons

Code blocks and tabbed code blocks automatically display a language icon in the header. Icons are detected from the language name using the devicon-plain icon set.

You can override the auto-detected icon with the icon parameter:

codeblock { language = typescript, icon = "lucide:file-code", "const x = 42" }

The icon parameter accepts any Iconify icon name.

Tabbed Code Blocks

Use codetabs to group related code blocks with tab switching:

codetabs { group = pkg,
  codetab { label = bun, icon = simple-icons:bun, language = bash, "bun add my-package" },
  codetab { label = npm, language = bash, "npm install my-package" },
  codetab { label = yarn, language = bash, "yarn add my-package" }
}

bun add my-package

Group Syncing

When multiple code tab groups share the same group name, selecting a tab in one automatically switches the matching tab in all others — even across pages. The selection is persisted in localStorage.

Supported Languages

Any language supported by Shiki works. Common examples:

Inline Code

For inline code, use the code function:

Use code { myFunction() } in your code.