Max Mustermann
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.
Jedes Beispiel hat zwei Tabs: Markdown zeigt das gerenderte Ergebnis, Raw die Quelle dazu.
Überschriften & Inhaltsverzeichnis #
# H1 ist für den Seitentitel reserviert (den rendert das Theme im Hero) -
im Inhalt geht es deshalb bei ## los. Die ##-Überschriften dieses
Beitrags landen im Inhaltsverzeichnis und bekommen beim Drüberfahren
einen Direktlink (Anker); die Tiefe steuert tableOfContents in
markup.yaml (hier H2–H4). Die Demo-Überschriften im Tab werden isoliert
gerendert und halten das Inhaltsverzeichnis sauber.
Textauszeichnung #
Interne Links setzt du am besten per relref-Shortcode - wie diesen zum
Willkommens-Beitrag; externe Links
öffnen in einem neuen Tab und bekommen automatisch ein passendes Icon (die
URL→Icon-Zuordnung steht in data/link-icons.yaml).
Text kann fett, kursiv, beides, durchgestrichen oder als
Inline-Code gesetzt werden. Emojis funktionieren ebenfalls 😎.
Ein Absatz mit einem externen Link - er öffnet in einem neuen Tab und trägt sein Icon.
Text kann **fett**, *kursiv*, ***beides***, ~~durchgestrichen~~ oder als
`Inline-Code` gesetzt werden. Emojis funktionieren ebenfalls :sunglasses:.
Ein Absatz mit einem [externen Link](https://gohugo.io) - er öffnet in einem
neuen Tab und trägt sein Icon.
Listen #
Ungeordnet:
- Erster Punkt
- Zweiter Punkt
- Verschachtelt
- Noch einer
- Dritter Punkt
Geordnet:
- Schritt eins
- Schritt zwei
- Schritt drei
Aufgabenliste:
- Theme installiert
- Demo gelesen
- Eigene Seite gebaut
Ungeordnet:
- Erster Punkt
- Zweiter Punkt
- Verschachtelt
- Noch einer
- Dritter Punkt
Geordnet:
1. Schritt eins
2. Schritt zwei
3. Schritt drei
Aufgabenliste:
- [x] Theme installiert
- [x] Demo gelesen
- [ ] Eigene Seite gebaut
Zitate #
Für farbige Hinweisboxen siehe den Beitrag Admonitions - ein einfaches Blockzitat reicht der Blockquote-Render-Hook unverändert durch:
Ein einfaches Blockzitat. Mehrere Zeilen werden zu einem Absatz zusammengefasst.
> Ein einfaches Blockzitat. Mehrere Zeilen werden zu einem Absatz
> zusammengefasst.
Tabellen #
| Funktion | Standard | Pro Seite überschreibbar |
|---|---|---|
| Inhaltsverzeichnis | an | ja |
| Lesezeit | an | ja |
| Verwandte Beiträge | an | ja |
| Teilen-Leiste | an | ja |
| Funktion | Standard | Pro Seite überschreibbar |
| --- | :---: | :---: |
| Inhaltsverzeichnis | an | ja |
| Lesezeit | an | ja |
| Verwandte Beiträge | an | ja |
| Teilen-Leiste | an | ja |
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"]
@@ config @@
-baseURL = "https://old.example"
+baseURL = "https://tbsch.de"
languageCode = "de"
```go
// Ein kleines Beispiel
package main
import "fmt"
func main() {
fmt.Println("Hallo vom tbsch-Theme!")
}
```
```yaml
# Front Matter eines Beitrags
title: "Mein Beitrag"
date: 2026-01-01
tags: ["hugo", "theme"]
```
```diff
@@ config @@
-baseURL = "https://old.example"
+baseURL = "https://tbsch.de"
languageCode = "de"
```
Fußnoten #
Fußnoten werden ans Ende des Textes gesetzt und verlinkt - und erscheinen zusätzlich als Popover, wenn du eine Referenz mit der Maus überfährst oder per Tastatur fokussierst. (Im Tab rendert die Fußnotenliste am Ende des Tab-Inhalts; in einem echten Beitrag steht sie am Ende des Beitrags.)
Markdown-Fußnoten1 werden ans Ende gesetzt und verlinkt - und erscheinen zusätzlich als Popover, wenn du eine Fußnoten-Referenz wie diese2 mit der Maus überfährst oder per Tastatur fokussierst.
Markdown-Fußnoten[^1] werden ans Ende gesetzt und verlinkt - und erscheinen
zusätzlich als Popover, wenn du eine Fußnoten-Referenz wie diese[^2] mit der
Maus überfährst oder per Tastatur fokussierst.
[^1]: Das ist die erste Fußnote.
[^2]: Und das die zweite, mit einem [Link](https://gohugo.io/content-management/shortcodes/).
Trennlinien #
Ein horizontaler Trenner separiert Abschnitte:
Das war’s mit den Grundlagen.
Ein horizontaler Trenner separiert Abschnitte:
---
Das war's mit den Grundlagen.
