Warum Markdown?
Für unseren Blog setzen wir auf Markdown — eine einfache Auszeichnungssprache, die sich ohne HTML-Kenntnisse schreiben lässt. Das Ergebnis: Autoren konzentrieren sich auf den Inhalt, nicht auf die Formatierung.
Markdown wurde 2004 von John Gruber entwickelt und ist heute der Standard für technische Dokumentation, Blogs und Wissensdatenbanken. Von GitHub über Notion bis hin zu Slack — Markdown ist überall.
Unsere Rendering-Pipeline
Hinter den Kulissen durchläuft jeder Blogbeitrag drei Schritte:
- Front Matter parsen — Titel, Datum, Autor und Lesezeit werden aus dem YAML-Header extrahiert
- Markdown zu HTML — Der Inhalt wird mit
remarkundremark-htmlin sauberes HTML umgewandelt - Styling — CSS-Regeln sorgen für eine konsistente, lesbare Darstellung
Der technische Stack
- gray-matter: Liest den YAML-Header (Front Matter) aus jeder
.md-Datei - remark: Parseiert den Markdown-Text in einen Abstract Syntax Tree (AST)
- remark-html: Wandelt den AST in HTML um
- Next.js: Rendert alles serverseitig für optimale Performance und SEO
Was alles unterstützt wird
Textformatierung
Markdown bietet verschiedene Möglichkeiten, Text zu formatieren. Fetter Text hebt wichtige Begriffe hervor, während kursiver Text für Betonungen genutzt wird. Auch Inline-Code lässt sich direkt im Fliesstext verwenden — ideal für technische Begriffe.
Überschriften
Überschriften strukturieren den Beitrag und helfen sowohl Lesern als auch Suchmaschinen, den Inhalt zu verstehen. Wir verwenden H2 für Hauptabschnitte und H3 für Unterabschnitte.
Listen
Ungeordnete Listen eignen sich perfekt für Aufzählungen:
- Einfach zu schreiben
- Klar strukturiert
- Visuell ansprechend
Nummerierte Listen sind ideal für Schritt-für-Schritt-Anleitungen:
- Markdown-Datei erstellen
- Front Matter hinzufügen
- Inhalt schreiben
- Datei im Blog-Ordner speichern
Zitate
Zitate heben wichtige Aussagen hervor und lockern den Text auf:
"Markdown ist wie eine Superkraft für Content-Ersteller — einfach zu lernen, mächtig im Einsatz."
Code-Blöcke
Für technische Inhalte sind Code-Blöcke unverzichtbar:
---
title: "Mein Blogbeitrag"
date: "2026-03-25"
excerpt: "Eine kurze Beschreibung"
author: "Name"
readTime: "3 min"
---
## Erste Überschrift
Hier kommt der Inhalt...
Bilder
Seit dem neusten Update unterstützt unser Blog auch Bilder direkt im Markdown. Die Syntax ist denkbar einfach:
Bilder werden automatisch responsiv dargestellt, mit abgerundeten Ecken und passendem Abstand — konsistent mit dem restlichen Design.
Links
Auch Links lassen sich einfach einbinden und werden in unserer Akzentfarbe dargestellt.
Vorteile für unser Team
- Schnelles Schreiben: Kein Umweg über ein CMS oder HTML-Editor
- Versionskontrolle: Jede Änderung wird in Git nachverfolgt
- Konsistentes Design: Das Styling wird zentral definiert, nicht pro Beitrag
- Performance: Statisches Rendering durch Next.js — keine Datenbank nötig
- SEO-freundlich: Sauberes HTML mit korrekter Überschriften-Hierarchie
Fazit
Markdown macht das Bloggen effizient und angenehm. Autoren schreiben in einer einfachen Syntax, und das Rendering sorgt automatisch für ein professionelles Ergebnis. Die Kombination aus Markdown, remark und Next.js gibt uns die perfekte Balance zwischen Einfachheit und Kontrolle.