Blocs de code

Affichez du code avec coloration syntaxique en utilisant la fonction codeblock. La coloration est assurée par Shiki.

Utilisation de base

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

const x = 42

Code multi-lignes

Les guillemets simples fonctionnent aussi pour le code multi-lignes :

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

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

Vous pouvez également entourer vos exemples de code avec plusieurs guillemets afin de ne pas avoir à utiliser \ pour l'échappement :

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

greet("World")""" }

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

greet("World")

Le nombre de guillemets d'ouverture et de fermeture n'a pas d'importance, tant qu'ils correspondent.

Charger du code depuis des fichiers

Utilisez readfile pour charger du code source depuis des fichiers externes au lieu de l'intégrer directement :

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

Cela permet de garder votre documentation synchronisée avec les fichiers sources réels. Le chemin est relatif au fichier .tiramisu.

Icônes de langage

Les blocs de code et les blocs de code à onglets affichent automatiquement une icône de langage dans l'en-tête. Les icônes sont détectées à partir du nom du langage en utilisant le jeu d'icônes devicon-plain.

Vous pouvez remplacer l'icône détectée automatiquement avec le paramètre icon :

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

Le paramètre icon accepte n'importe quel nom d'icône Iconify.

Blocs de code à onglets

Utilisez codetabs pour regrouper des blocs de code associés avec une navigation par onglets :

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

Synchronisation des groupes

Lorsque plusieurs groupes d'onglets de code partagent le même nom group, sélectionner un onglet dans l'un synchronise automatiquement l'onglet correspondant dans tous les autres — même entre les pages. La sélection est conservée dans localStorage.

Langages pris en charge

Tous les langages supportés par Shiki fonctionnent. Exemples courants :

Code en ligne

Pour le code en ligne, utilisez la fonction code :

Use code { myFunction() } in your code.