Markdown-Grundlagen & Typografie

Dieser Beitrag zeigt, wie das Theme ganz normales Markdown darstellt - die Lese-Typografie, das Inhaltsverzeichnis (links bei genug Platz) und die Direktlinks an jeder Überschrift entstehen alle automatisch.

Überschriften & Inhaltsverzeichnis #

Jede ##/###-Überschrift landet im Inhaltsverzeichnis und bekommt beim Drüberfahren einen Direktlink (Anker). Die Tiefe steuert tableOfContents in markup.yaml (hier H2–H4).

Eine Ebene tiefer (H3) #

Und noch eine (H4) #

Textauszeichnung #

Text kann fett, kursiv, beides, durchgestrichen oder als Inline-Code gesetzt werden. Emojis funktionieren ebenfalls 😎.

Ein normaler Absatz mit einem internen Link und einem externen Link - externe Links öffnen in einem neuen Tab und bekommen automatisch ein passendes Icon (die URL→Icon-Zuordnung steht in data/linkIcons.yaml).

Listen #

Ungeordnet:

• Erster Punkt
• Zweiter Punkt
  • Verschachtelt
  • Noch einer
• Dritter Punkt

Geordnet:

1. Schritt eins
2. Schritt zwei
3. Schritt drei

Aufgabenliste:

• Theme installiert
• Demo gelesen
• Eigene Seite gebaut

Zitate #

Ein einfaches Blockzitat. Es nutzt den Blockquote-Render-Hook, der hier einfach durchreicht - für farbige Hinweisboxen siehe den Beitrag Admonitions.

Tabellen #

Code #

Inline-Code wie hugo server steht mitten im Text. Codeblöcke werden mit Chroma klassenbasiert hervorgehoben, damit Hell- und Dunkel-Palette getrennt ausgeliefert werden können:

// Ein kleines Beispiel
package main

import "fmt"

func main() {
    fmt.Println("Hallo vom tbsch-Theme!")
}

# Front Matter eines Beitrags
title: "Mein Beitrag"
date: 2026-01-01
tags: ["hugo", "theme"]

Fußnoten #

Markdown-Fußnoten¹ werden ans Ende des Beitrags gesetzt und verlinkt - und erscheinen zusätzlich als Popover, wenn du eine Fußnoten-Referenz wie diese² mit der Maus überfährst oder per Tastatur fokussierst.

Trennlinien #

Ein horizontaler Trenner separiert Abschnitte:

Das war’s mit den Grundlagen.