Zurück zum Blog
Montag, 17. November 2025

Vollständiger Markdown-Leitfaden: Turbo-Workflow mit Markdown2Image

Vollständiger Markdown-Leitfaden: Turbo-Workflow mit Markdown2Image

Markdown eignet sich perfekt, um technische Inhalte schnell zu strukturieren und anschließend als Visual zu exportieren. Dieser deutschsprachige Spickzettel folgt exakt dem Workflow von Markdown2Image und liefert sofort einsatzbereite Bausteine.

🎯 Highlights

  • Alles in einem Dokument: Überschriften, Text, Tabellen und Medien griffbereit
  • Praxisnahe Beispiele: Jeder Abschnitt zeigt, wie er produktiv eingesetzt wird
  • Layout-Hinweise: Tipps für 16:9- und 4:5-Formate, damit nichts abgeschnitten wird
  • QA direkt integriert: Checkliste verhindert Fehler vor dem Export

📝 Basistypografie

_kursiv_ / **fett** / ~~durchgestrichen~~
***fett + kursiv***
`Inline-Code` und ```mehrzeilige Blöcke```
> Zitate verschachtelst du mit ">"

Feldnotiz: Befehle und Variablen immer mit Backticks markieren – Markdown2Image hebt sie dann automatisch hervor.

Erweiterte Formatierungen

==Markierung== hebt wichtige Passagen hervor
<u>Unterstreichungen</u> erledigst du mit HTML
H~2~O / 10^3^ für Tief- und Hochstellungen

🔗 Links & Referenzen

[Standardlink](https://example.com)
[Link mit Titel](https://example.com "Tooltip")
[Mail](mailto:[email protected])
[Telefon](tel:+491601234567)

[GitHub]: https://github.com "Quellcode"
Weitere Infos auf [GitHub]

Tipp: In langen Texten Referenz-Links nutzen, damit Übersetzung und Versionierung einfacher bleiben.

🖼️ Bilder & Medien

![Hero](hero.png "Laptop und Code")
![Feste Breite](flow.png =480x)
![Zwei Spalten](img-left.png){width="48%"}
![Zoom bei Klick](diagram.png){data-zoomable}
  • Bildunterschriften direkt danach: *Abbildungstext*
  • Für gestochen scharfe Ergebnisse Bilder mit mindestens 1200px Breite verwenden

📊 Struktur & Organisation

Listen

- Hauptlieferung
  - Unteraufgabe
1. Vorbereitung
2. Umsetzung
   1. API
   2. UI
- [x] erledigt / [ ] offen

Definitionslisten

Markdown
: Leichtgewichtige Auszeichnungssprache

Markdown2Image
: Konvertiert Markdown in Slides oder Karten

Tabellen

| Befehl | Zweck | Hinweis |
| --- | --- | --- |
| `npm install` | Abhängigkeiten installieren | Node-Version prüfen |
| `pnpm build` | Produktionsbuild | Mit --filter Modul wählen |

⚙️ Empfohlener Workflow

  1. Entwurf in Obsidian oder VS Code
  2. Lokalisieren über post_translations inklusive slug & SEO je Sprache
  3. Validieren mit markdownlint und internen Tests
  4. Visualisieren via Markdown2Image samt Templates
  5. Veröffentlichen nach Directus-Review und Site-Webhooks

🧪 QA-Checkliste

  • Syntax-Highlighting für jeden Codeblock aktiviert
  • Alle Links verwenden HTTPS und funktionieren
  • Tabellen bleiben bei maximal drei Spalten
  • SEO-Texte enthalten relevante deutsche Keywords
  • Layout in 16:9 und 4:5 in Markdown2Image geprüft

🔚 Fazit

Konsequente Syntax spart Korrekturschleifen, sobald die Inhalte in Bilder überführt werden. Nutze diesen Leitfaden als Basis für Templates, damit Lokalisierung, QA und Export denselben Qualitätsstandard halten.

Vollständiger Markdown-Leitfaden (DE) | Markdown2Image | MarkdownToImage