Codeblöcke

Zeigen Sie syntaxhervorgehobenen Code mit der Funktion codeblock an. Die Hervorhebung wird von Shiki bereitgestellt.

Grundlegende Verwendung

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

const x = 42

Mehrzeiliger Code

Einfache Anführungszeichen funktionieren auch für mehrzeiligen Code:

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

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

Alternativ können Sie Ihre Codebeispiele in mehrfache Anführungszeichen einschließen, damit Sie \ zum Escaping nicht verwenden müssen:

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

greet("World")""" }

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

greet("World")

Die Anzahl der öffnenden und schließenden Anführungszeichen spielt keine Rolle, solange sie übereinstimmen.

Code aus Dateien laden

Verwenden Sie readfile, um Quellcode aus externen Dateien zu laden, anstatt ihn einzubetten:

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

Dies hält Ihre Dokumentation mit den tatsächlichen Quelldateien synchron. Der Pfad ist relativ zur .tiramisu-Datei.

Sprach-Icons

Codeblöcke und Codeblöcke mit Tabs zeigen automatisch ein Sprach-Icon in der Kopfzeile an. Icons werden anhand des Sprachnamens über das Icon-Set devicon-plain erkannt.

Sie können das automatisch erkannte Icon mit dem Parameter icon überschreiben:

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

Der Parameter icon akzeptiert jeden Iconify-Symbolnamen.

Codeblöcke mit Tabs

Verwenden Sie codetabs, um zusammengehörige Codeblöcke mit Tab-Umschaltung zu gruppieren:

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

Gruppen-Synchronisierung

Wenn mehrere Code-Tab-Gruppen denselben group-Namen teilen, wird durch die Auswahl eines Tabs in einer Gruppe automatisch der entsprechende Tab in allen anderen umgeschaltet — auch seitenübergreifend. Die Auswahl wird in localStorage gespeichert.

Unterstützte Sprachen

Jede von Shiki unterstützte Sprache funktioniert. Gängige Beispiele:

Inline-Code

Für Inline-Code verwenden Sie die Funktion code:

Use code { myFunction() } in your code.