Tutorials

Markdown in Visual Studio Code einrichten: Der vollständige Guide

Melden

Markdown ist eine der beliebtesten und einfachsten Auszeichnungssprachen der Welt. Sie eignet sich perfekt für Notizen, Dokumentationen (Readmes), Blogbeiträge und technische Texte.

Die gute Nachricht vorweg: Visual Studio Code (VS Code) unterstützt Markdown von Haus aus. Sie müssen die Sprache selbst also nicht „installieren“. Um jedoch das Maximum an Produktivität herauszuholen, können Sie VS Code mit den richtigen Erweiterungen in einen vollwertigen Markdown-Editor verwandeln.

In diesem Tutorial erfahren Sie Schritt für Schritt, wie Sie Markdown in VS Code einrichten, nutzen und mit den besten Erweiterungen optimieren.

1. Erste Schritte: Markdown ohne Erweiterungen nutzen

VS Code bringt bereits eine solide Grundausstattung für Markdown mit (Syntax-Highlighting und eine Live-Vorschau).

Schritt 1: Eine Markdown-Datei erstellen

  1. Öffnen Sie VS Code.
  2. Erstellen Sie eine neue Datei: Datei > Neue Datei (oder Strg + N bzw. Cmd + N).
  3. Speichern Sie die Datei mit der Endung .md ab (z. B. notizen.md).

Schritt 2: Die integrierte Live-Vorschau öffnen

Sobald Sie Text eingeben, möchten Sie das Ergebnis sehen:

  • Vorschau im selben Tab: Drücken Sie Strg + Umschalt + V (Mac: Cmd + Shift + V).
  • Vorschau nebeneinander (Side-by-Side): Drücken Sie Strg + K gefolgt von V (Mac: Cmd + K gefolgt von V).
  • Alternativ klicken Sie oben rechts im Editor-Fenster auf das Vorschau-Symbol (eine Lupe über einem Buch).

2. Das Upgrade: Die wichtigsten Markdown-Erweiterungen installieren

Um die Autovervollständigung, Shortcuts, Tabellen-Erstellung und Export-Funktionen (z. B. als PDF) freizuschalten, installieren wir nützliche Erweiterungen.

So installieren Sie Erweiterungen in VS Code:

  1. Klicken Sie in der linken Seitenleiste auf das Erweiterungen-Symbol (vier Quadrate) oder drücken Sie Strg + Umschalt + X (Mac: Cmd + Shift + X).
  2. Suchen Sie nach dem Namen der gewünschten Erweiterung.
  3. Klicken Sie auf den blauen Button „Installieren“ (Install).

Die 3 unverzichtbaren Erweiterungen:

1. Markdown All in One (von Yu Zhang)

Das Schweizer Taschenmesser für Markdown.

  • Funktionen:
    • Praktische Shortcuts (z. B. Text markieren und Strg + B drücken für Fettschrift).
    • Automatisches Erstellen und Aktualisieren eines Inhaltsverzeichnisses (Table of Contents).
    • Automatisches Fortführen von Listen (beim Drücken von Enter).
    • Unterstützung für mathematische Formeln (KaTeX).

2. markdownlint (von David Anson)

Der Rechtschreibprüfer für Ihren Code-Stil.

  • Funktionen:
    • Findet Formatierungsfehler (z. B. fehlende Leerzeilen vor Überschriften).
    • Zeigt Warnungen direkt im Text an und hilft Ihnen, saubere Dokumente zu schreiben.
    • Viele Fehler lassen sich automatisch per Klick korrigieren (Quick Fix).

3. Markdown Preview Enhanced (von Yiyi Wang)

Die mächtigste Vorschau-Engine.

  • Funktionen:
    • Deutlich schönere und anpassbarere Vorschau als das VS-Code-Standardfenster.
    • Unterstützt Diagramme (Mermaid, PlantUML).
    • Ermöglicht den direkten Export Ihrer Datei als PDF, HTML oder E-Book.
  • Nutzung: Klicken Sie nach der Installation rechts oben auf das neu hinzugefügte Icon (Vorschau mit einem kleinen Pfeil) oder nutzen Sie Strg + Umschalt + V.

3. Nützliche Shortcuts im Alltag

Mit installierter Markdown All in One-Erweiterung können Sie folgende Tastenkürzel nutzen:

Aktion Windows / Linux macOS
Fett (**text**) Strg + B Cmd + B
Kursiv (*text*) Strg + I Cmd + I
Link einfügen ([text](url)) Strg + K Cmd + K
Live-Vorschau an der Seite Strg + K dann V Cmd + K dann V
Zeile nach oben/unten schieben Alt + Pfeil hoch/runter Option + Pfeil hoch/runter

4. Bonus: Markdown als PDF exportieren

Wenn Sie Ihr Markdown-Dokument mit Kollegen oder Kunden teilen möchten, ist das PDF-Format ideal.

  1. Mit „Markdown Preview Enhanced“:
    • Öffnen Sie die erweiterte Vorschau.
    • Machen Sie einen Rechtsklick irgendwo in das Vorschaufenster.
    • Wählen Sie Chrome (Puppeteer) > PDF (benötigt ggf. einen kurzen Download bei der ersten Ausführung) oder HTML > Open in Browser und drucken Sie es dort als PDF.
  2. Alternative: Suchen und installieren Sie die eigenständige Erweiterung Markdown PDF (von yzane). Klicken Sie dann einfach mit der rechten Maustaste in Ihren Text und wählen Sie Markdown PDF: Export (pdf).

Fazit

Sie haben VS Code nun erfolgreich für Markdown optimiert. Dank der nativen Unterstützung war keine komplizierte Grundinstallation nötig, und mit den Erweiterungen Markdown All in One und Markdown Preview Enhanced verfügen Sie nun über eine Umgebung, die spezialisierten Programmen wie Notion oder Obsidian in puncto Textbearbeitung in nichts nachsteht.

0