Test

August 15, 2026 Lesezeit: 17 Minuten

Diese Seite sammelt Formatierungen, die Bludit, Markdown und das verwendete Theme bieten. Dies dient zur Sichtprüfung nach Updates, hilft beim Basteln eigener Anpassungen und ermöglicht generell das Testen von Ideen. Bei jedem Beispiel steht, wie es in Markdown erzeugt wird. Am Schluss folgt eine „Verlängerung“ mit 25 durchnummerierten Überschriften, damit sich Inhaltsverzeichnis und Scroll-Verhalten auf einer ausreichend langen Seite testen lassen.

Zuletzt geprüft mit Bludit 3.22.0 und Blowfish 1.7.0 am 15. August 2026.

Textauszeichnung

Normaler Fließtext, ~~durchgestrichen~~, fett, kursiv, fett und kursiv und Inline-Code. Dazu hervorgehobener Text sowie Tastenkürzel wie Strg + C oder einzeln Esc.

Normaler Fließtext
~~durchgestrichen~~
**fett**, *kursiv* 
***fett und kursiv***
`Inline-Code`
<mark>hervorgehobener Text</mark>
<kbd>Strg</kbd> + <kbd>C</kbd> oder <kbd>Esc</kbd>

Durchgestrichen, fett, kursiv und Inline-Code sind Markdown. Die Hervorhebung und die Tastenkappen sind dagegen reines HTML, das hier gleichermaßen erkannt wird.

Links

Dieser zweite Abschnitt enthält einen internen Link zu „Hello World“ und einen externen Link auf bludit.com (mit automatischer Kennzeichnung dahinter).

[interner Link](/hello-world) und [externer Link](https://www.bludit.com)

Beide Links sind ähnlich aufgebaut, verhalten sich aber unterschiedlich: Bei internen Links bleibt man im bestehenden Tab, während sich externe Links in einem neuen Tab öffnen. Zwischen den beiden Optionen wird anhand des in () angegebenen Ziels unterschieden. Bei externen Adressen wird ein Symbol zur Kennzeichnung angehängt und zudem target="_blank" sowie rel="noopener noreferrer" gesetzt.

Callouts

[!NOTE] Ein neutraler Hinweis für Zusatzinformationen.

[!TIP] Ein Tipp, der die Arbeit erleichtert.

[!IMPORTANT] Etwas, das man nicht überlesen sollte.

[!WARNING] Eine Warnung vor einem möglichen Problem.

[!DANGER] Ein Hinweis auf etwas, das Schaden anrichten kann.

> [!NOTE]
> Ein neutraler Hinweis für Zusatzinformationen.

Callouts sind hervorgehobene Boxen, deren Farbe, Icon und Bezeichnung durch die Kennung in der ersten Zeile festgelegt werden. Möglich sind NOTE, TIP, IMPORTANT, WARNING und DANGER (wobei Letzteres dann mit „Caution“ bezeichnet wird).

Horizontale Trennlinie

Über dem Absatz steht eine horizontale Trennlinie.

---

Listen

Ungeordnet:

Erster Punkt
Zweiter Punkt
- Eingerückte (zwei Leerzeichen) zweite Ebene
- Wiederholung
  - Doppelt eingerückte (vier Leerzeichen) dritte Ebene
Dritter Punkt

Geordnet:

Erster Schritt
Zweiter Schritt
1. Eingerückte (drei Leerzeichen) zweite Ebene
2. Wiederholung
Dritter Schritt

Aufgabenliste:

[x] Erledigter Punkt
[x] Ebenfalls erledigt
[ ] Offener Punkt
[ ] Ebenfalls offen

- Erster Punkt
- Zweiter Punkt
  - Eingerückte *(zwei Leerzeichen)* zweite Ebene
  - Wiederholung
    - Doppelt eingerückte *(vier Leerzeichen)* dritte Ebene
- Dritter Punkt

1. Erster Schritt
2. Zweiter Schritt
   1. Eingerückte *(drei Leerzeichen)* zweite Ebene
   2. Wiederholung
3. Dritter Schritt

- [x] Erledigt
- [ ] Offen

Als Marker für nummerierte Listen kennt Markdown nur Ziffern. Buchstaben wie a. erzeugen keinen Unterpunkt, sondern landen als Text im übergeordneten Eintrag.

In Aufgabenlisten lassen sich Häkchen nicht per Klick setzen oder entfernen. Sie hängen allein von der Schreibweise - [x] beziehungsweise - [ ] ab.

[!IMPORTANT] Vor „Dritter Punkt“ und „Dritter Schritt“ steht mehr Abstand als zwischen den übrigen Einträgen. Das kommt nicht von Markdown — im HTML stehen die Punkte sauber ohne Absätze —, sondern aus dem verwendeten Theme: Die Regel .content p, .content ul, .content ol { margin-bottom: var(--space-md) } trifft auch verschachtelte Listen. Deren 24 Pixel landen unter dem letzten Unterpunkt. Das Problem ließe sich mit einer Zeile Code beheben, etwa über das Plugin HTML-Code (oder direkt im Theme): .content li > ul, .content li > ol { margin-bottom: 0 }. Der Kindselektor sorgt dafür, dass der Abstand unter eigenständigen Listen erhalten bleibt.

Überschriften (zweite Ebene als Standard)

Die im Seitentext für einzelne Abschnitte verwendeten Überschriften beginnen üblicherweise auf der zweiten Ebene (so wie hier).

Überschrift der ersten Ebene

Eine Überschrift der ersten Ebene würde dagegen mit dem Seitentitel konkurrieren. Auch erfolgt keine Aufnahme in das Inhaltsverzeichnis.

# Erste Ebene
## Zweite Ebene
### Dritte Ebene
#### Vierte Ebene
##### Fünfte Ebene

[!NOTE] Jede Überschrift von der zweiten bis zur vierten Ebene erhält am Ende automatisch einen Ankerlink — allerdings ohne Umlaute oder Sonderzeichen: Aus „Überschriften (zweite Ebene als Standard)“ wird der Anker #berschriften-zweite-ebene-als-standard. Bei der Überschrift „Nicht unterstützt“ wird #nicht-untersttzt an den eigentlichen Seitenlink gehängt. Dies könnte beim Teilen eines Ankerlinks komisch wirken — ließe sich bei Bedarf aber anpassen.

Überschrift der dritten Ebene

Dieses Beispiel zeigt, wie die dritte Ebene im Inhaltsverzeichnis eingerückt wird (zur Abgrenzung von der zweiten Ebene).

Überschrift der vierten Ebene

Auch die vierte Ebene wird beim Inhaltsverzeichnis noch berücksichtigt (zweifach eingerückt).

[!NOTE] Etwas unschön ist, dass die Überschrift der vierten Ebene sichtbar mehr Raum bekommt als die Überschrift der dritten Ebene — ein Fix wäre aber denkbar.

Überschrift der fünften Ebene

Ab der fünften Ebene erfolgt keine Aufnahme mehr in das Inhaltsverzeichnis.

Code

Codeblöcke mit Sprachangabe, Kopfleiste und Kopierknopf:

docker compose up -d
docker compose logs -f php   # Logs mitlesen

services:
  php:
    image: dunglas/frankenphp
    restart: unless-stopped

:root {
    --accent: #1f1f1f;
}

```bash
docker compose up -d
docker compose logs -f php   # Logs mitlesen
```

Die Sprache hinter den drei Backticks steuert die Beschriftung in der Kopfleiste. Ohne Angabe bleibt diese leer — eingefärbt wird der Block trotzdem, highlight.js rät dann die Sprache anhand des Inhalts:

:root {
    --accent: #1f1f1f;
}

```
:root {
    --accent: #1f1f1f;
}
```

Eine Zeile mit langem Inhalt veranschaulicht das horizontale Scrollen im Block:

curl -fsSL https://example.com/sehr/langer/pfad/der/nicht/umbricht/und/deshalb/horizontal/scrollen/muss/skript.sh | sh -s -- --mit --einigen --parametern --die --die --zeile --weiter --verlaengern

Ein Block mit Reitern:

[Debian]
apt update && apt install -y docker.io
[Alpine]
apk add --no-cache docker
[Arch]
pacman -Syu docker

```tabs
[Debian]
apt update && apt install -y docker.io
[Alpine]
apk add --no-cache docker
[Arch]
pacman -Syu docker
```

Der Block beginnt mit tabs statt einer Sprache. Jeder Reiter wird mit seinem Namen in eckigen Klammern eingeleitet, alternativ mit @tab Name. Eine Sprache lässt sich pro Reiter nicht angeben. Auch hier rät highlight.js, liegt bei kurzen Zeilen aber oft daneben: Die ersten beiden Reiter oben werden als Lua und SQL erkannt, der dritte gar nicht.

Tabellen

Farbschema	Akzent	Hintergrund	Bemerkung
Light	`#1f1f1f`	`#ffffff`	monochrom
Dark	`#e5e5e5`	`#171717`	monochrom
Nord	`#88c0d0`	`#2e3440`	kühl
Dracula	`#bd93f9`	`#282a36`	kräftig
Catppuccin	`#cba6f7`	`#1e1e2e`	weich

| Spalte | Spalte |
|---|---|
| Wert | Wert |

Die Trennzeile aus Bindestrichen unter der Kopfzeile ist Pflicht, sonst entsteht keine Tabelle.

Eine Tabelle mit vielen Spalten prüft, ob sie sich horizontal scrollen lässt:

Spalte A	Spalte B	Spalte C	Spalte D	Spalte E	Spalte F	Spalte G	Spalte H
Wert eins	Wert zwei	Wert drei	Wert vier	Wert fünf	Wert sechs	Wert sieben	Wert acht

[!NOTE] Anders als Codeblöcke bekommen Tabellen keinen eigenen Scrollbereich. Ist eine Tabelle breiter als die Textspalte — die achtspaltige Tabelle von oben kommt auf 624 Pixel, während die Textspalte 345 Pixel breit ist —, wächst gegebenenfalls die ganze Seite mit: Auf dem Smartphone wird sie 639 statt 375 Pixel breit und lässt sich seitlich verschieben, was insbesondere bei der Navigation per Touchscreen stören kann. Dies ließe sich mit einer Zeile Code ändern, etwa über das Plugin HTML-Code (oder direkt im Theme): .content table{display:block;width:max-content;max-width:100%;overflow-x:auto}. Danach wird die Tabelle separat gescrollt und die ursprüngliche Breite der Seite bleibt bestehen.

Zitate

Ein einfaches Zitat über eine Zeile.

Ein längeres Zitat über mehrere Zeilen, das exemplarisch zeigt, wie in solchen Fällen der Absatz im Zitatblock umbricht. Zudem wird die Möglichkeit zur Angabe einer Quelle unter dem Zitat genutzt.

— Quellenangabe

> Ein einfaches Zitat über eine Zeile.

> Ein längeres Zitat über mehrere Zeilen, das exemplarisch zeigt, wie in solchen Fällen der Absatz im Zitatblock umbricht. Zudem wird die Möglichkeit zur Angabe einer Quelle unter dem Zitat genutzt.
>
> — Quellenangabe

Eine mit > eingeleitete, ansonsten aber leere Zeile dient der Trennung von Absätzen innerhalb eines Zitatblocks.

Bilder

Ein Bild mit Bildunterschrift, das sich per Klick in einer Lightbox öffnet:

Avatar des Blogs

![Alternativtext](/pfad/zum/bild.jpeg "Diese Bildunterschrift erscheint unter dem Bild.")

Der Text in Anführungszeichen ist der Bildtitel und wird auch als Bildunterschrift genutzt. Die Lightbox erscheint automatisch bei jedem Bild im Seitentext.

Ein Karussell mit mehreren Bildern, auf Touch-Geräten auch per Wischen bedienbar. Der erste Slide nutzt die Markdown-Schreibweise, der zweite eine nackte URL mit Bildunterschrift — beides ist zulässig:

![Erste Ansicht](/bl-themes/bludit-blowfish/img/spleenftw.jpeg)
/bl-themes/bludit-blowfish/img/spleenftw.jpeg | Zweite Ansicht

```carousel
![Erste Ansicht](/pfad/zum/bild1.jpeg)
/pfad/zum/bild2.jpeg | Zweite Ansicht
```

Eine Zeile ergibt einen Slide. Wichtig: Das Pipe-Zeichen für die Bildunterschrift gehört nur hinter eine nackte URL. Steht es in den Klammern der Markdown-Schreibweise, wandert es in die Bildadresse und das Bild lädt nicht.

Nicht unterstützt

Bludit verarbeitet Markdown ohne die Erweiterung Parsedown Extra. Fußnoten und Definitionslisten bleiben deshalb als Rohtext stehen. Beides steht hier bewusst, um den Unterschied sichtbar zu machen — es ist kein vergessener Fehler.

Ein Satz mit einer Fußnote.[^1]

[^1]: Der Text der Fußnote, der unten auf der Seite erscheinen würde.

Flat-File-CMS : Speichert Inhalte als Dateien statt in einer Datenbank.

Ein Satz mit einer Fußnote.[^1]

[^1]: Der Text der Fußnote.

Begriff
: Erklärung des Begriffs

„Verlängerung“

Zum Abschluss folgt (wie eingangs angekündigt) eine „Verlängerung“ mit 25 durchnummerierten Überschriften, damit sich Inhaltsverzeichnis und Scroll-Verhalten auf einer ausreichend langen Seite testen lassen.