ist jetzt verfügbar! Lesen Sie über die neuen Funktionen und Fehlerbehebungen vom November.

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.

Markdown Outline view

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.

Jumping to a header in a Markdown file

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.

Jumping to a header across all Markdown files in a workspace

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.

Path completions in a Markdown link

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)

Header section suggestions in a Markdown link

Sie können die Pfad-IntelliSense mit "markdown.suggest.paths.enabled": false deaktivieren.

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.

Suggestions for all Markdown headers in the current workspace

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.

Adding a link to the selected header in another file

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.

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.

Inserting a Markdown link by dragging and dropping from the explorer

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.

Inserting a Markdown link by pasting a link in the editor

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 ![](pfad/zum/bild.png). 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:

  1. Stellen Sie sicher, dass Sie Copilot in Ihrer VS Code-Umgebung eingerichtet haben. Sie können Copilot kostenlos nutzen.

  2. Öffnen Sie eine Markdown-Datei.

  3. Platzieren Sie den Cursor auf einem Bildlink.

  4. Wählen Sie das Code-Aktion (Glühbirne)-Symbol aus und wählen Sie Alternativtext generieren.

    Screenshot that shows a Code Action menu with Generate alt text option for a Markdown image link.

  5. 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

Smart select within a Markdown document expands from a block element, to the block element containing it, to the rest of the content under a header, to the header itself

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.

A warning shown in the editor when linking to a file that does not exist

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:

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.

Jumping to a header in a Markdown file

Alle Referenzen finden wird unterstützt für:

  • Kopfzeilen: # Meine Kopfzeile. Zeigt alle Links zu #meine-kopfzeile an.
  • Externe Links: [Text](http://example.com). Zeigt alle Links zu http://example.com an.
  • Interne Links: [Text](./pfad/zu/datei.md). Zeigt alle Links zu ./pfad/zu/datei.md an.
  • Fragmente in Links: [Text](./pfad/zu/datei.md#meine-kopfzeile). Zeigt alle Links zu #meine-kopfzeile in ./pfad/zu/datei.md an.

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.

Renaming a Markdown header to update all links to it

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 auf http://example.com/seite verlinkt haben.
  • Interne Links: [Text](./pfad/zu/datei.md). Dies benennt die Datei ./pfad/zu/datei.md um und aktualisiert auch alle Links dazu.
  • Fragmente in Links: [Text](./pfad/zu/datei.md#meine-kopfzeile). Dies benennt die Kopfzeile in ./pfad/zu/datei.md um und aktualisiert auch alle Links dazu.

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.

Markdown Preview

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.

The preview automatically switching to preview the current Markdown document

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.

A locked Markdown preview

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.

Markdown Preview editor selection scroll sync

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.

Markdown Preview editor line marker

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.

Markdown Preview double click switches to editor

Rendern von mathematischen Formeln

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

Markdown Preview rendering of math formulas with 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.

Markdown security alert

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.

Markdown security selector

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.

Create Profile dropdown with profile templates

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.

© . This site is unofficial and not affiliated with Microsoft.