# Markdown-Grundlagen & Typografie > Überschriften, Listen, Tabellen, Code, Fußnoten, Zitate - wie das Theme Standard-Markdown rendert. _Quelle: https://theme.docs.tbsch.de/de/post/2026-01-12-markdown-grundlagen-typografie/ · Stand: 2026-01-12_ 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.

Überschrift H2 #

Überschrift H3 #

Überschrift H4 #

Überschrift H5 #

Überschrift H6 #

## Überschrift H2

### Überschrift H3

#### Überschrift H4

##### Überschrift H5

###### Überschrift H6

## Textauszeichnung Interne Links setzt du am besten per `relref`-Shortcode - wie diesen zum [Willkommens-Beitrag](/de/post/2026-02-23-willkommen/); 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](/de/post/2026-01-19-admonitions-hinweisboxen/) - 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ßnoten¹ werden ans Ende 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.

Das ist die erste Fußnote. ↩︎
Und das die zweite, mit einem Link. ↩︎

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.