Markdown und Visual Studio Code
Das Arbeiten 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, mit denen Sie produktiver arbeiten können.
Markdown-Erweiterungen
Zusätzlich zu der Funktionalität, die VS Code standardmäßig bietet, können Sie eine Erweiterung für mehr Funktionalität installieren.
Tipp: Klicken Sie oben auf eine Erweiterungskachel, um die Beschreibung und Bewertungen zu lesen und zu entscheiden, welche Erweiterung für Sie am besten geeignet ist. Sehen Sie mehr auf dem Marktplatz.
Markdown-Vorschau
VS Code unterstützt Markdown-Dateien sofort. 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 dem Code und der Vorschau der Markdown-Datei umschalten. Um zwischen den Ansichten zu wechseln, drücken Sie ⇧⌘V (Windows, Linux Strg+ Umschalt+V) im Editor. Sie können die Vorschau nebeneinander (⌘K V (Windows, Linux Strg+K V)) mit der zu bearbeitenden Datei anzeigen und Änderungen während der Bearbeitung in Echtzeit anzeigen.
Hier ist ein Beispiel mit einer sehr einfachen Datei.
Tipp: Sie können auch mit der rechten Maustaste auf die Registerkarte Editor klicken und wählen Sie Vorschau öffnen (⇧⌘V (Windows, Linux Strg + Umschalt+V)) oder verwenden Sie die Befehlspalette (⇧⌘P (Windows, Linux Strg+ Umschalt+P)): Öffnen Sie die Vorschau zur Seite Befehl (⌘K V (Windows, Linux Strg + K V)).
Dynamische Vorschau und Vorschausperre
Standardmäßig wird die Markdown-Vorschau automatisch aktualisiert, um eine Vorschau der aktuell aktiven Markdown-Datei anzuzeigen:
Sie können eine Markdown-Vorschau mit dem Befehl Markdown: Toggle Preview Locking sperren, um sie zu seinem aktuellen Markdown-Dokument. Gesperrte Vorschauen werden im Titel angezeigt:
Editor- und Vorschau-Synchronisation
VS Code synchronisiert automatisch den Markdown-Editor und die Vorschaufenster. Scrollen Sie durch die Markdown-Vorschau, und der Editor wird entsprechend dem Ansichtsfenster der Vorschau gescrollt. Scrollen Sie durch den Markdown-Editor und die Vorschau wird entsprechend ihrem Ansichtsfenster 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 am linken Rand angezeigt:
Zusätzlich öffnet ein Doppelklick auf ein Element in der Markdown-Vorschau automatisch den Editor für die Datei und scrollt zu der Zeile, die dem angeklickten Element am nächsten liegt.
Gliederungsansicht
Die Gliederungsansicht ist ein separater Abschnitt am unteren Rand des Datei-Explorers. Wenn es erweitert wird, wird der Symbolbaum des aktuell aktiven Editors angezeigt. Bei Markdown-Dateien ist der Symbolbaum die Header-Hierarchie der Markdown-Datei.
Die Gliederungsansicht ist eine großartige Möglichkeit, die Kopfstruktur und Gliederung Ihres Dokuments zu überprüfen.
Erweitern der Markdown-Vorschau
Erweiterungen können benutzerdefinierte Stile und Skripte zur Markdown-Vorschau hinzufügen, um ihr Erscheinungsbild zu ändern und neue Funktionen hinzuzufügen. Hier ist eine Reihe von Beispielerweiterungen, die die Vorschau anpassen:
Eigenes CSS verwenden
Sie können auch Ihr eigenes CSS in der Markdown-Vorschau mit der Einstellung "markdown.styles": verwenden. Hier werden URLs für Stylesheets aufgelistet, 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 mit dem Namen Style.css im Stammverzeichnis Ihres aktuellen Arbeitsbereichs zu laden, verwenden Sie die Datei > Preferences > Settings, um die Datei settings.json workspace aufzurufen und diese Aktualisierung vorzunehmen:
// Place your settings in this file to overwrite default and user settings.{ "markdown.styles": }Halten Sie Leerzeichen hinter sich, um Zeilenumbrüche zu erstellen
Um harte Zeilenumbrüche zu erstellen, benötigt Markdown zwei oder mehr Leerzeichen am Ende einer Zeile. Abhängig von Ihren Benutzer- oder Arbeitsbereichseinstellungen kann VS Code so konfiguriert werden, dass nachgestellte Leerzeichen entfernt werden. Um Leerzeichen nur in Markdown-Dateien beizubehalten, können Sie diese Zeilen zu Ihrer settings.json hinzufügen:
{ "": { "files.trimTrailingWhitespace": false }}Sicherheit der Markdown-Vorschau
Aus Sicherheitsgründen beschränkt VS Code den in der Markdown-Vorschau angezeigten Inhalt. Dazu gehört das Deaktivieren der Skriptausführung und das Laden von Ressourcen nur über https.
Wenn die Markdown-Vorschau Inhalte auf einer Seite blockiert, wird in der oberen rechten Ecke des Vorschaufensters ein Warnungs-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: Change preview security settings in einer beliebigen Markdown-Datei ausführen:
Die Sicherheitseinstellungen für die Markdown-Vorschau gelten für alle Dateien im Arbeitsbereich.
Hier sind die Details zu jeder dieser Sicherheitsstufen:
Strict
Dies ist die Standardeinstellung. Lädt nur vertrauenswürdige Inhalte und deaktiviert die Skriptausführung. Blockiert http Bilder.
Es wird dringend empfohlen, die Strict -Sicherheit aktiviert zu lassen, es sei denn, Sie haben einen sehr guten Grund, sie zu ändern, UND Sie vertrauen allen Markdown-Dateien im Arbeitsbereich.
Unsicheren Inhalt zulassen
Hält Skripte deaktiviert, erlaubt aber das Laden von Inhalten über http.
Deaktivieren
Deaktiviert die zusätzliche Sicherheit im Vorschaufenster. Dies ermöglicht die Ausführung von Skripten und das Laden von Inhalten über http .
Snippets für Markdown
In VS Code sind mehrere integrierte Markdown-Snippets enthalten – drücken Sie ⌃Leertaste (Windows, Linux Strg + Leertaste) (Trigger Suggest) und Sie erhalten eine kontextspezifische Liste von Vorschlägen.
Tipp: Sie können Ihre eigenen benutzerdefinierten Snippets für Markdown hinzufügen. Werfen Sie einen Blick auf benutzerdefinierte Snippets, um herauszufinden, wie.
Kompilieren von Markdown in HTML
VS Code lässt sich über den integrierten Task-Runner in Markdown-Compiler integrieren. Wir können dies verwenden, um .md Dateien in .html Dateien zu kompilieren. Lassen Sie uns durch das Kompilieren eines einfachen Markdown-Dokuments gehen.
Schritt 1: Installieren Sie einen Markdown-Compiler
Für diese exemplarische Vorgehensweise verwenden wir den beliebten Knoten.js-Modul, Markdown-es.
npm install -g markdown-itHinweis: Es gibt viele Markdown-Compiler zur Auswahl, die über Markdown-it hinausgehen. Wählen Sie diejenige aus, die Ihren Bedürfnissen und Ihrer Umgebung am besten entspricht.
Schritt 2: Erstellen Sie eine einfache MD-Datei
Öffnen Sie VS Code in einem leeren Ordner und erstellen Sie eine sample.md Datei.
Hinweis: Sie können einen Ordner mit VS-Code öffnen, indem Sie entweder den Ordner mit der Datei > Ordner öffnen auswählen oder zu dem Ordner navigieren und ‚code‘ eingeben .‘ an der Kommandozeile.
Platzieren Sie den folgenden Quellcode in dieser Datei:
# Hello Markdown in VS Code!This is a simple introduction to compiling Markdown in VS Code.Things you'll need:* (https://nodejs.org)* (https://www.npmjs.com/package/markdown-it)* (/docs/editor/tasks)## Section Title> This block quote is here for your information.Schritt 3: Erstellen Sie Aufgaben.json
Der nächste Schritt ist das Einrichten der Task-Konfigurationsdatei tasks.json. Führen Sie dazu Terminal > Aufgaben konfigurieren aus und klicken Sie auf Aufgaben erstellen.json-Datei aus Vorlagen. VS Code präsentiert dann eine Liste möglicher tasks.json Vorlagen zur Auswahl. Wählen Sie Andere aus, da wir einen externen Befehl ausführen möchten.
Dies erzeugt eine tasks.json Datei in Ihrem Arbeitsbereich .vscode Ordner mit folgendem Inhalt:
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": }Um markdown-it zum Kompilieren der Markdown-Datei zu verwenden, ändern Sie den Inhalt wie folgt:
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": }Tipp: Während das Beispiel bei allgemeinen Konfigurationseinstellungen hilfreich ist, ist IntelliSense auch für die
tasks.json-Datei verfügbar, um Ihnen zu helfen. Verwenden Sie ⌃Leertaste (Windows, Linux Strg + Leertaste), um die verfügbaren Einstellungen anzuzeigen.
Schritt 4: Führen Sie die Build-Aufgabe aus
Da es in komplexeren Umgebungen mehr als eine Build-Aufgabe geben kann, fordern wir Sie auf, die auszuführende Aufgabe auszuwählen, nachdem Sie ⇧⌘B (Windows, Linux Strg + Umschalt +B) gedrückt haben (Build-Aufgabe ausführen). Darüber hinaus können Sie die Ausgabe nach Kompilierungsproblemen durchsuchen. Da wir nur die Markdown-Datei in HTML konvertieren möchten, scannen Sie niemals die Build-Ausgabe aus der angezeigten Liste.
Zu diesem Zeitpunkt sollte eine zusätzliche Datei in der Dateiliste angezeigt werden sample.html.
Wenn Sie die Compile Markdown-Aufgabe zur Standard-Build-Aufgabe machen möchten, führen Sie Configure Default Build Task aus dem globalen Terminalmenü aus und wählen Sie Compile Markdown aus der angezeigten Liste aus. Die endgültige tasks.json -Datei sieht dann folgendermaßen aus:
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": , "group": { "kind": "build", "isDefault": true } } ]}Automatisierung der Markdown-Kompilierung
Gehen wir noch einen Schritt weiter und automatisieren die Markdown-Kompilierung mit VS Code. Wir können dies mit der gleichen Task Runner-Integration wie zuvor tun, jedoch mit einigen Änderungen.
Schritt 1: Installieren Sie Gulp und einige Plug-Ins
Wir verwenden Gulp, um eine Aufgabe zu erstellen, die die Markdown-Kompilierung automatisiert. Wir verwenden auch das Gulp-Markdown-Plug-In, um die Dinge ein wenig einfacher zu machen.
Wir müssen gulp sowohl global (-g switch) als auch lokal installieren:
npm install -g gulpnpm install gulp gulp-markdown-itHinweis: gulp-markdown-it ist ein Gulp-Plug-In für das Markdown-it-Modul, das wir zuvor verwendet haben. Es gibt viele andere Gulp Markdown-Plug-Ins, die Sie verwenden können, sowie Plug-Ins für Grunt.
Sie können testen, ob Ihre gulp-Installation erfolgreich war, indem Sie gulp -v eingeben. Es sollte eine Version sowohl für die globale (CLI) als auch für die lokale Installation angezeigt werden.
Schritt 2: Erstellen Sie eine einfache Schluckaufgabe
Öffnen Sie VS Code im selben Ordner wie zuvor (enthält sample.md und tasks.json unter dem Ordner .vscode) und erstellen Sie gulpfile.js
Fügen Sie den folgenden Quellcode in diese Datei ein:
var gulp = require('gulp');var markdown = require('gulp-markdown-it');gulp.task('markdown', function() { return gulp .src('**/*.md') .pipe(markdown()) .pipe( gulp.dest(function(f) { return f.base; }) );});gulp.task('default', function() { return gulp.watch('**/*.md', gulp.series());});Was passiert hier?
- Wir achten auf Änderungen an jeder Markdown-Datei in unserem Arbeitsbereich, dh dem aktuellen Ordner, der in VS Code geöffnet ist.
- Wir nehmen die Markdown-Dateien, die sich geändert haben, und führen sie über unseren Markdown-Compiler aus, dh
gulp-markdown-it. - Wir haben jetzt eine Reihe von HTML-Dateien, die jeweils nach ihrer ursprünglichen Markdown-Datei benannt sind. Wir legen diese Dateien dann im selben Verzeichnis ab.
Schritt 3: Führen Sie die Gulp-Standardaufgabe aus
Um die Aufgabenintegration mit VS Code abzuschließen, müssen wir die Aufgabenkonfiguration von zuvor ändern, um die soeben erstellte Standard-Gulp-Aufgabe auszuführen. Sie können entweder die tasks.json -Datei löschen oder sie leeren, wobei Sie nur die "version": "2.0.0" -Eigenschaft beibehalten. Führen Sie nun Run Task aus dem globalen Terminalmenü aus. Beachten Sie, dass Ihnen eine Auswahl angezeigt wird, in der die in der Gulp-Datei definierten Aufgaben aufgelistet sind. Wählen Sie Schluck: Standard, um die Aufgabe zu starten. Wir erlauben Ihnen, die Ausgabe nach Kompilierungsproblemen zu durchsuchen. Da wir nur die Markdown-Datei in HTML konvertieren möchten, scannen Sie niemals die Build-Ausgabe aus der angezeigten Liste. Wenn Sie zu diesem Zeitpunkt andere Markdown-Dateien erstellen und / oder ändern, werden die entsprechenden generierten HTML-Dateien und / oder Änderungen beim Speichern angezeigt. Sie können auch das automatische Speichern aktivieren, um die Dinge noch effizienter zu gestalten.
Wenn Sie die Aufgabe gulp: default zur Standard-Build-Aufgabe machen möchten, die ausgeführt wird, wenn Sie ⇧⌘B drücken (Windows, Linux Strg + Umschalt+B), führen Sie Configure Default Build Task aus dem globalen Terminalmenü aus und wählen Sie gulp: default aus der angezeigten Liste. Die endgültige tasks.json -Datei sieht dann folgendermaßen aus:
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": , "group": { "kind": "build", "isDefault": true } } ]}Schritt 4: Beenden Sie die gulp-Standardaufgabe
Die gulp: default-Aufgabe wird im Hintergrund ausgeführt und sucht nach Dateiänderungen an Markdown-Dateien. Wenn Sie den Task stoppen möchten, können Sie den Befehl Task beenden aus dem globalen Terminalmenü verwenden.
Lesen Sie weiter, um mehr darüber zu erfahren:
- CSS, SCSS und Less – Möchten Sie Ihr CSS bearbeiten? VS Code bietet großartige Unterstützung für CSS, SCSS und weniger Bearbeitung.
Häufige Fragen
Gibt es eine Rechtschreibprüfung?
Nicht mit VS Code installiert, aber es gibt Erweiterungen zur Rechtschreibprüfung. Überprüfen Sie den VS Code Marketplace, um nach nützlichen Erweiterungen für Ihren Workflow zu suchen.
Unterstützt VS Code GitHub Flavored Markdown?
Nein, VS Code zielt mit der markdown-it-Bibliothek auf die CommonMark Markdown-Spezifikation ab. GitHub bewegt sich in Richtung der CommonMark-Spezifikation, über die Sie in diesem Update lesen können.
In der obigen Anleitung habe ich den Befehl Task konfigurieren nicht in der Befehlspalette gefunden?
Möglicherweise haben Sie eine Datei in VS Code anstelle eines Ordners geöffnet. Sie können einen Ordner öffnen, indem Sie entweder den Ordner mit der Datei > Ordner öffnen auswählen oder zu dem Ordner navigieren und ‚code‘ eingeben .‘ an der Kommandozeile.