Markdown und Visual Studio Code
Die Arbeit mit Markdown-Dateien in Visual Studio Code ist einfach, unkompliziert und macht Spaß. Neben der grundlegenden Bearbeitung von VS Code gibt es eine Reihe von Markdown-spezifischen Funktionen, die Ihnen helfen, produktiver zu sein.
Hinweis: Um Ihnen den Einstieg in die Bearbeitung von Markdown-Dateien zu erleichtern, können Sie die Doc Writer Profilvorlage verwenden, um nützliche Erweiterungen (Rechtschreibprüfung, Markdown-Linter) zu installieren und entsprechende Einstellungen zu konfigurieren.
Markdown bearbeiten
Dokumentgliederung
Die Gliederungsansicht ist ein separater Bereich am unteren Rand des Datei-Explorers. Wenn sie erweitert ist, zeigt sie den Symbolbaum des aktuell aktiven Editors. Für Markdown-Dateien ist der Symbolbaum die Kopfzeilenhierarchie der Markdown-Datei.

Die Gliederungsansicht ist eine großartige Möglichkeit, die Kopfzeilenstruktur und Gliederung Ihres Dokuments zu überprüfen.
Snippets für Markdown
VS Code enthält einige nützliche Snippets, die das Schreiben von Markdown beschleunigen können. Dazu gehören Snippets für Codeblöcke, Bilder und mehr. Drücken Sie ⌃Space (Windows, Linux Ctrl+Space) (Vorschläge auslösen) während der Bearbeitung, um eine Liste vorgeschlagener Markdown-Snippets anzuzeigen. Sie können auch den dedizierten Snippet-Auswähler verwenden, indem Sie Snippet einfügen im Befehlspaletten auswählen.
Tipp: Sie können Ihre eigenen benutzerdefinierten Snippets für Markdown hinzufügen. Schauen Sie sich Benutzerdefinierte Snippets an, um zu erfahren, wie das geht.
Zu Kopfzeile in Datei springen
Verwenden Sie ⇧⌘O (Windows, Linux Ctrl+Shift+O), um schnell zu einer Kopfzeile in der aktuellen Datei zu springen.

Sie können alle Kopfzeilen in der Datei durchsuchen oder mit der Eingabe eines Kopfzeilennamens nach der gewünschten suchen. Sobald Sie die gewünschte Kopfzeile gefunden haben, drücken Sie Enter, um Ihren Cursor dorthin zu bewegen. Drücken Sie Esc, um das Springen zur Kopfzeile abzubrechen.
Zu Kopfzeile im Arbeitsbereich springen
Verwenden Sie ⌘T (Windows, Linux Ctrl+T), um Kopfzeilen in allen Markdown-Dateien im aktuellen Arbeitsbereich zu durchsuchen.

Geben Sie einen Kopfzeilennamen ein, um die Liste zu filtern und die gewünschte Kopfzeile zu finden.
Pfadvervollständigung
Pfadvervollständigungen helfen beim Erstellen von Links zu Dateien und Bildern. Diese Pfade werden automatisch von IntelliSense angezeigt, während Sie den Pfad eines Bildes oder Links eingeben, und können auch manuell mit ⌃Space (Windows, Linux Ctrl+Space) angefordert werden.

Pfade, die mit / beginnen, werden relativ zum Stammverzeichnis des aktuellen Arbeitsbereichs aufgelöst, während Pfade, die mit ./ beginnen oder kein Präfix haben, relativ zur aktuellen Datei aufgelöst werden. Pfadvorschläge werden automatisch angezeigt, wenn Sie / eingeben, oder können manuell durch Eingabe von ⌃Space (Windows, Linux Ctrl+Space) aufgerufen werden.
IntelliSense für Pfade kann Ihnen auch helfen, Links zu Kopfzeilen innerhalb der aktuellen Datei oder einer anderen Markdown-Datei zu erstellen. Beginnen Sie den Pfad mit #, um Vervollständigungen für alle Kopfzeilen in der Datei zu sehen (abhängig von Ihren Einstellungen müssen Sie möglicherweise ⌃Space (Windows, Linux Ctrl+Space) verwenden, um diese anzuzeigen)

Sie können die Pfad-IntelliSense mit "markdown.suggest.paths.enabled": false deaktivieren.
Links zu einer Kopfzeile in einer anderen Datei erstellen
Möchten Sie auf eine Kopfzeile in einem anderen Markdown-Dokument verlinken, aber den vollständigen Dateipfad nicht merken oder eingeben? Versuchen Sie, die Vervollständigungen von Arbeitsbereichskopfzeilen zu verwenden! Geben Sie dazu einfach ## in einen Markdown-Link ein, um eine Liste aller Markdown-Kopfzeilen aus dem aktuellen Arbeitsbereich zu sehen.

Akzeptieren Sie eine dieser Vervollständigungen, um den vollständigen Link zu dieser Kopfzeile einzufügen, auch wenn er sich in einer anderen Datei befindet.

Sie können konfigurieren, ob/wann Arbeitsbereichskopfzeilen-Vervollständigungen angezeigt werden, mit der Einstellung markdown.suggest.paths.includeWorkspaceHeaderCompletions. Gültige Einstellungswerte sind:
onDoubleHash(Standard) – Zeigt Arbeitsbereichskopfzeilen-Vervollständigungen nur an, nachdem Sie##eingegeben haben.onSingleOrDoubleHash– Zeigt Arbeitsbereichskopfzeilen-Vervollständigungen nach Eingabe von#oder##an.never– Zeigt Arbeitsbereichskopfzeilen-Vervollständigungen nie an.
Beachten Sie, dass die Suche nach allen Kopfzeilen im aktuellen Arbeitsbereich aufwendig sein kann. Es kann also zu einer leichten Verzögerung kommen, wenn sie zum ersten Mal angefordert werden, insbesondere bei Arbeitsbereichen mit vielen Markdown-Dateien.
Bilder und Links zu Dateien einfügen
Zusätzlich zur Pfadvervollständigung unterstützt VS Code auch einige andere Möglichkeiten, Bilder und Dateilinks in Ihre Markdown-Dokumente einzufügen.
Sie können eine Datei aus dem Explorer von VS Code oder von Ihrem Betriebssystem per Drag & Drop in einen Markdown-Editor ziehen. Beginnen Sie damit, eine Datei aus dem Explorer von VS Code über Ihren Markdown-Code zu ziehen und halten Sie dann die Shift-Taste gedrückt, um sie in die Datei zu ziehen. Der Vorschaucusor zeigt an, wo sie eingefügt wird, wenn Sie sie loslassen.

Wenn Sie lieber die Tastatur verwenden, können Sie auch eine Datei oder Bilddaten in einen Markdown-Editor kopieren und einfügen. Wenn Sie eine Datei, einen Dateilink oder eine URL einfügen, können Sie wählen, ob Sie einen Markdown-Link einfügen oder den Link als reinen Text beibehalten möchten.

Oder Sie können den Befehl Markdown: Bild aus Arbeitsbereich einfügen verwenden, um Bilder und Markdown: Link zu Datei im Arbeitsbereich einfügen, um Dateilinks einzufügen.
Eingefügte Bilder verwenden die Markdown-Bildsyntax . Links fügen einen normalen Markdown-Link ein [](pfad/zur/datei.md).
Standardmäßig kopiert VS Code automatisch Bilder, die außerhalb des Arbeitsbereichs abgelegt oder eingefügt werden, in Ihren Arbeitsbereich. Die Einstellung markdown.copyFiles.destination steuert, wo die neue Bilddatei erstellt werden soll. Diese Einstellung ordnet Globs, die auf das aktuelle Markdown-Dokument zutreffen, Bildzielen zu. Die Bildziele können auch einige einfache Variablen verwenden. Informationen zu den verfügbaren Variablen finden Sie in der Beschreibung der Einstellung markdown.copyFiles.destination.
Wenn Sie beispielsweise möchten, dass jede Markdown-Datei unter /docs in Ihrem Arbeitsbereich neue Mediendateien in einem speziellen Verzeichnis images für die aktuelle Datei ablegt, können Sie Folgendes schreiben:
"markdown.copyFiles.destination": {
"/docs/**/*": "images/${documentBaseName}/"
}
Wenn nun eine neue Datei in /docs/api/readme.md eingefügt wird, wird die Bilddatei unter /docs/api/images/readme/image.png erstellt.
Sie können sogar einfache reguläre Ausdrücke verwenden, um Variablen auf eine ähnliche Weise wie bei Snippets zu transformieren. Diese Transformation verwendet beispielsweise nur den ersten Buchstaben des Dateinamens des Dokuments bei der Erstellung der Mediendatei.
"markdown.copyFiles.destination": {
"/docs/**/*": "images/${documentBaseName/(.).*/$1/}/"
}
Wenn eine neue Datei in /docs/api/readme.md eingefügt wird, wird das Bild nun unter /docs/api/images/r/image.png erstellt.
Generieren von Alternativtext für Bilder
Sie können KI verwenden, um Alternativtext für Bilder in Markdown-Dateien zu generieren oder zu aktualisieren. So generieren Sie Alternativtext:
-
Stellen Sie sicher, dass Sie Copilot in Ihrer VS Code-Umgebung eingerichtet haben. Sie können Copilot kostenlos nutzen.
-
Öffnen Sie eine Markdown-Datei.
-
Platzieren Sie den Cursor auf einem Bildlink.
-
Wählen Sie das Code-Aktion (Glühbirne)-Symbol aus und wählen Sie Alternativtext generieren.

-
Wenn Sie bereits einen Alternativtext haben, wählen Sie die Code-Aktion aus und wählen Sie Alternativtext verfeinern.
Intelligente Auswahl
Intelligente Auswahl ermöglicht es Ihnen, die Auswahl in Markdown-Dokumenten schnell zu erweitern und zu verkleinern. Dies kann verwendet werden, um ganze Blockelemente (wie Codeblöcke oder Tabellen) schnell auszuwählen und den gesamten Inhalt eines Header-Bereichs in der Markdown-Datei auszuwählen.
Intelligente Auswahl verwendet die folgenden Befehle:
- Erweitern: ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right)
- Verkleinern: ⌃⇧⌘← (Windows, Linux Shift+Alt+Left)
Die Auswahl bezieht sich auf die folgenden Elemente und folgt einem traditionellen hierarchischen Muster:
- Kopfzeilen
- Listen
- Blockzitate
- Eingefasste Codeblöcke
- HTML-Codeblöcke
- Absätze

Link-Validierung
Die Link-Validierung prüft lokale Links in Ihrem Markdown-Code, um sicherzustellen, dass sie gültig sind. Dies kann häufige Fehler aufdecken, wie z. B. das Verlinken auf eine umbenannte Kopfzeile oder eine Datei, die auf der Festplatte nicht mehr vorhanden ist.

Die Link-Validierung ist standardmäßig deaktiviert. Um sie zu aktivieren, setzen Sie "markdown.validate.enabled": true. VS Code analysiert dann Markdown-Links zu Kopfzeilen, Bildern und anderen lokalen Dateien. Ungültige Links werden als Warnungen oder Fehler gemeldet. Die gesamte Link-Validierung erfolgt lokal, und externe HTTP(S)-Links werden nicht überprüft.
Es gibt einige Einstellungen, die Sie zur Anpassung der Link-Validierung verwenden können:
- markdown.validate.fileLinks.enabled – Validierung von Links zu lokalen Dateien aktivieren/deaktivieren:
[Link](/pfad/zu/datei.md) - markdown.validate.fragmentLinks.enabled – Validierung von Links zu Kopfzeilen in der aktuellen Datei aktivieren/deaktivieren:
[Link](#_ein-kopfzeile) - markdown.validate.fileLinks.markdownFragmentLinks – Validierung von Links zu Kopfzeilen in anderen Markdown-Dateien aktivieren/deaktivieren:
[Link](andere-datei.md#eine-kopfzeile) - markdown.validate.referenceLinks.enabled – Validierung von Referenzlinks aktivieren/deaktivieren:
[Link][ref]. - markdown.validate.ignoredLinks – Eine Liste von Link-Globs, die übersprungen werden sollen. Dies ist nützlich, wenn Sie auf Dateien verlinken, die auf der Festplatte nicht existieren, aber beim Veröffentlichen des Markdown vorhanden sind.
Alle Referenzen auf Kopfzeilen und Links finden
Verwenden Sie den Befehl Alle Referenzen finden (⇧⌥F12 (Windows, Linux Shift+Alt+F12)), um alle Speicherorte im aktuellen Arbeitsbereich zu finden, an denen eine Markdown-Kopfzeile oder ein Link referenziert wird.

Alle Referenzen finden wird unterstützt für:
- Kopfzeilen:
# Meine Kopfzeile. Zeigt alle Links zu#meine-kopfzeilean. - Externe Links:
[Text](http://example.com). Zeigt alle Links zuhttp://example.coman. - Interne Links:
[Text](./pfad/zu/datei.md). Zeigt alle Links zu./pfad/zu/datei.mdan. - Fragmente in Links:
[Text](./pfad/zu/datei.md#meine-kopfzeile). Zeigt alle Links zu#meine-kopfzeilein./pfad/zu/datei.mdan.
Kopfzeilen und Links umbenennen
Sind Sie es leid, versehentlich Links zu brechen, wenn Sie eine Markdown-Kopfzeile ändern? Versuchen Sie stattdessen, Symbol umbenennen (F2) zu verwenden. Nachdem Sie den neuen Kopfzeilennamen eingegeben und Enter gedrückt haben, aktualisiert VS Code die Kopfzeile und aktualisiert automatisch alle Links zu dieser Kopfzeile.

Sie können F2 auch verwenden für:
- Kopfzeilen:
# Meine Kopfzeile. Dies aktualisiert alle Links zu#meine-kopfzeile. - Externe Links:
[Text](http://example.com/seite). Dies aktualisiert alle Stellen, die aufhttp://example.com/seiteverlinkt haben. - Interne Links:
[Text](./pfad/zu/datei.md). Dies benennt die Datei./pfad/zu/datei.mdum und aktualisiert auch alle Links dazu. - Fragmente in Links:
[Text](./pfad/zu/datei.md#meine-kopfzeile). Dies benennt die Kopfzeile in./pfad/zu/datei.mdum und aktualisiert auch alle Links dazu.
Automatische Linkaktualisierung bei Dateiverschiebung oder Umbenennung
Mit der automatischen Markdown-Linkaktualisierung aktualisiert VS Code automatisch Markdown-Links, wenn eine verlinkte Datei verschoben oder umbenannt wird. Sie können diese Funktion mit der Einstellung markdown.updateLinksOnFileMove.enabled aktivieren. Gültige Einstellungswerte sind:
never(Standard) – Versucht nicht, Links automatisch zu aktualisieren.prompt– Bestätigen Sie, bevor Sie Links aktualisieren.always– Links automatisch und ohne Bestätigung aktualisieren.
Die automatische Linkaktualisierung erkennt Umbenennungen von Markdown-Dateien, Bildern und Verzeichnissen. Sie können sie für zusätzliche Dateitypen mit markdown.updateLinksOnFileMove.include aktivieren.
Markdown-Vorschau
VS Code unterstützt Markdown-Dateien direkt. Sie beginnen einfach mit dem Schreiben von Markdown-Text, speichern die Datei mit der Erweiterung .md und können dann die Visualisierung des Editors zwischen Code und Vorschau der Markdown-Datei umschalten; offensichtlich können Sie auch eine vorhandene Markdown-Datei öffnen und damit beginnen. Um zwischen den Ansichten zu wechseln, drücken Sie ⇧⌘V (Windows, Linux Ctrl+Shift+V) im Editor. Sie können die Vorschau nebeneinander (⌘K V (Windows, Linux Ctrl+K V)) mit der bearbeiteten Datei anzeigen und Änderungen in Echtzeit sehen, während Sie bearbeiten.
Hier ist ein Beispiel mit einer einfachen Datei.

Tipp: Sie können auch mit der rechten Maustaste auf den Editor-Tab klicken und Vorschau öffnen (⇧⌘V (Windows, Linux Ctrl+Shift+V)) auswählen oder die Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) verwenden, um den Befehl Markdown: Vorschau nebenan öffnen (⌘K V (Windows, Linux Ctrl+K V)) auszuführen.
Dynamische Vorschauen und Vorschau-Sperrung
Standardmäßig werden Markdown-Vorschauen automatisch aktualisiert, um die aktuell aktive Markdown-Datei anzuzeigen.

Sie können eine Markdown-Vorschau mit dem Befehl Markdown: Vorschau-Sperrung umschalten sperren, um sie an ihr aktuelles Markdown-Dokument zu binden. Gesperrte Vorschauen werden im Titel mit [Vorschau] gekennzeichnet.

Hinweis: Der Befehl Markdown: Vorschau-Sperrung umschalten ist nur verfügbar, wenn die Markdown-Vorschau der aktive Tab ist.
Editor- und Vorschau-Synchronisation
VS Code synchronisiert automatisch die Markdown-Editor- und Vorschau-Bereiche. Scrollen Sie die Markdown-Vorschau, und der Editor wird entsprechend der Vorschau gescrollt. Scrollen Sie den Markdown-Editor, und die Vorschau wird entsprechend gescrollt.

Sie können die Scroll-Synchronisation mit den Einstellungen markdown.preview.scrollPreviewWithEditor und markdown.preview.scrollEditorWithPreview deaktivieren.
Die aktuell ausgewählte Zeile im Editor wird in der Markdown-Vorschau durch einen hellgrauen Balken im linken Rand angezeigt.

Zusätzlich wird durch Doppelklicken auf ein Element in der Markdown-Vorschau automatisch der Editor für die Datei geöffnet und zur Zeile gescrollt, die dem angeklickten Element am nächsten liegt.

Rendern von mathematischen Formeln
Die integrierte Markdown-Vorschau von VS Code rendert mathematische Gleichungen mit KaTeX.

Inline-Gleichungen sind in einfache Dollarzeichen eingeschlossen.
Inline math: $x^2$
Sie können einen mathematischen Gleichungsblock mit doppelten Dollarzeichen erstellen.
Math block:
$$
\displaystyle
\left( \sum_{k=1}^n a_k b_k \right)^2
\leq
\left( \sum_{k=1}^n a_k^2 \right)
\left( \sum_{k=1}^n b_k^2 \right)
$$
Sie können "markdown.math.enabled": false einstellen, um das Rendern von mathematischen Formeln in Markdown-Dateien zu deaktivieren.
Erweitern der Markdown-Vorschau
Erweiterungen können benutzerdefinierte Stile und Skripte zur Markdown-Vorschau beitragen, um ihr Aussehen zu ändern und neue Funktionalität hinzuzufügen. Hier ist eine Reihe von Beispielerweiterungen, die die Vorschau anpassen:
Verwenden von eigenem CSS
Sie können auch Ihr eigenes CSS in der Markdown-Vorschau mit der Einstellung "markdown.styles": [] verwenden. Diese Liste enthält URLs für Stylesheets, die in der Markdown-Vorschau geladen werden sollen. Diese Stylesheets können entweder https-URLs oder relative Pfade zu lokalen Dateien im aktuellen Arbeitsbereich sein.
Um beispielsweise ein Stylesheet namens Style.css am Stammverzeichnis Ihres aktuellen Arbeitsbereichs zu laden, verwenden Sie Datei > Einstellungen > Einstellungen, um die Datei settings.json des Arbeitsbereichs zu öffnen und diese Änderung vorzunehmen:
// Place your settings in this file to overwrite default and user settings.
{
"markdown.styles": ["Style.css"]
}
Behalten Sie nachfolgende Leerzeichen bei, um Zeilenumbrüche zu erstellen
Um harte Zeilenumbrüche zu erstellen, benötigt Markdown mindestens zwei Leerzeichen am Ende einer Zeile. Abhängig von Ihren Benutzer- oder Arbeitsbereichseinstellungen ist VS Code möglicherweise so konfiguriert, dass nachfolgende Leerzeichen entfernt werden. Um nachfolgende Leerzeichen nur in Markdown-Dateien beizubehalten, können Sie diese Zeilen zu Ihrer settings.json hinzufügen:
{
"[markdown]": {
"files.trimTrailingWhitespace": false
}
}
Markdown-Vorschau-Sicherheit
Aus Sicherheitsgründen beschränkt VS Code den Inhalt, der in der Markdown-Vorschau angezeigt wird. Dazu gehört die Deaktivierung der Skriptausführung und das Zulassen des Ladens von Ressourcen nur über https.
Wenn die Markdown-Vorschau Inhalte auf einer Seite blockiert, wird oben rechts im Vorschaufenster ein Benachrichtigungs-Popup angezeigt.

Sie können ändern, welche Inhalte in der Markdown-Vorschau zulässig sind, indem Sie auf dieses Popup klicken oder den Befehl Markdown: Vorschau-Sicherheitseinstellungen ändern in einer beliebigen Markdown-Datei ausführen.

Die Sicherheitseinstellungen der Markdown-Vorschau gelten für alle Dateien im Arbeitsbereich.
Hier sind die Details zu jeder dieser Sicherheitsebenen:
Streng
Dies ist die Standardeinstellung. Lädt nur vertrauenswürdige Inhalte und deaktiviert die Skriptausführung. Blockiert http-Bilder.
Wir empfehlen, die strenge Sicherheit aktiviert zu lassen, es sei denn, Sie haben einen sehr guten Grund, sie zu ändern UND Sie vertrauen allen Markdown-Dateien im Arbeitsbereich.
Unsichere Inhalte zulassen
Skripte bleiben deaktiviert, aber Inhalte können über http geladen werden.
Deaktivieren
Deaktiviert zusätzliche Sicherheit im Vorschaufenster. Dies ermöglicht die Skriptausführung und erlaubt auch das Laden von Inhalten über http.
Doc Writer Profilvorlage
Profile ermöglichen es Ihnen, Ihre Erweiterungen, Einstellungen und UI-Layouts schnell zu wechseln, je nach Ihrem aktuellen Projekt oder Ihrer Aufgabe. Um Ihnen den Einstieg in die Bearbeitung von Markdown zu erleichtern, können Sie die Doc Writer Profilvorlage verwenden, ein kuratiertes Profil mit nützlichen Erweiterungen und Einstellungen. Sie können eine Profilvorlage so verwenden, wie sie ist, oder sie als Ausgangspunkt für weitere Anpassungen für Ihre eigenen Workflows verwenden.
Sie wählen eine Profilvorlage über das Dropdown-Menü Profile > Profil erstellen... aus.

Nachdem Sie eine Profilvorlage ausgewählt haben, können Sie die Einstellungen und Erweiterungen überprüfen und einzelne Elemente entfernen, wenn Sie sie nicht in Ihr neues Profil aufnehmen möchten. Nach der Erstellung des neuen Profils auf Basis einer Vorlage werden Änderungen an Einstellungen, Erweiterungen oder der Benutzeroberfläche in Ihrem Profil gespeichert.
Markdown-Erweiterungen
Zusätzlich zur Funktionalität, die VS Code von Haus aus bietet, können Sie eine Erweiterung für erweiterte Funktionen installieren.
Tipp: Wählen Sie eine Erweiterungskachel aus, um die Beschreibung und Bewertungen zu lesen und zu entscheiden, welche Erweiterung für Sie am besten geeignet ist. Mehr finden Sie im Marketplace.
Nächste Schritte
Lesen Sie weiter, um mehr über Folgendes zu erfahren:
- CSS, SCSS und Less – Möchten Sie Ihr CSS bearbeiten? VS Code bietet hervorragende Unterstützung für die Bearbeitung von CSS, SCSS und Less.
Häufig gestellte Fragen
Gibt es eine Rechtschreibprüfung?
Nicht mit VS Code installiert, aber es gibt Erweiterungen für die Rechtschreibprüfung. Schauen Sie im VS Code Marketplace nach nützlichen Erweiterungen, die Ihren Workflow unterstützen.
Unterstützt VS Code GitHub Flavored Markdown?
Nein, VS Code zielt auf die CommonMark Markdown-Spezifikation mit der markdown-it Bibliothek ab. GitHub bewegt sich in Richtung der CommonMark-Spezifikation, was Sie in diesem Update nachlesen können.