Markdown-Erweiterung

Markdown-Erweiterungen ermöglichen es Ihnen, die integrierte Markdown-Vorschau von Visual Studio Code zu erweitern und zu verbessern. Dazu gehört das Ändern des Erscheinungsbilds der Vorschau oder das Hinzufügen von Unterstützung für neue Markdown-Syntax.

Das Aussehen der Markdown-Vorschau mit CSS ändern

Erweiterungen können CSS beisteuern, um das Aussehen oder Layout der Markdown-Vorschau zu ändern. Stylesheets werden über den Contribution Point markdown.previewStyles in der package.json der Erweiterung registriert.

"contributes": {
    "markdown.previewStyles": [
        "./style.css"
    ]
}

"markdown.previewStyles" ist eine Liste von Dateien relativ zum Stammordner der Erweiterung.

Beigesteuerte Stile werden nach den integrierten Markdown-Vorschau-Stilen, aber vor den "markdown.styles" des Benutzers hinzugefügt.

Die Erweiterung Markdown Preview GitHub Styling ist ein gutes Beispiel dafür, wie ein Stylesheet verwendet werden kann, um die Markdown-Vorschau wie das gerenderte Markdown von GitHub aussehen zu lassen. Sie können den Quellcode der Erweiterung auf GitHub einsehen.

Unterstützung für neue Syntax mit markdown-it-Plugins hinzufügen

Die VS Code Markdown-Vorschau unterstützt die CommonMark-Spezifikation. Erweiterungen können Unterstützung für zusätzliche Markdown-Syntax hinzufügen, indem sie ein markdown-it-Plugin beisteuern.

Um ein markdown-it-Plugin beizusteuern, fügen Sie zuerst einen Beitrag "markdown.markdownItPlugins" in der package.json Ihrer Erweiterung hinzu.

"contributes": {
    "markdown.markdownItPlugins": true
}

Geben Sie dann in der Hauptfunktion activation der Erweiterung ein Objekt mit einer Funktion namens extendMarkdownIt zurück. Diese Funktion nimmt die aktuelle markdown-it-Instanz und muss eine neue markdown-it-Instanz zurückgeben.

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  return {
    extendMarkdownIt(md: any) {
      return md.use(require('markdown-it-emoji'));
    }
  };
}

Um mehrere markdown-it-Plugins beizusteuern, geben Sie mehrere verkettete use-Anweisungen zurück.

return md.use(require('markdown-it-emoji')).use(require('markdown-it-hashtag'));

Erweiterungen, die markdown-it-Plugins beisteuern, werden verzögert aktiviert, wenn zum ersten Mal eine Markdown-Vorschau angezeigt wird.

Die Erweiterung markdown-emoji demonstriert die Verwendung eines markdown-it-Plugins, um der Markdown-Vorschau Emoji-Unterstützung hinzuzufügen. Sie können den Quellcode der Emoji-Erweiterung auf GitHub einsehen.

Möglicherweise möchten Sie auch Folgendes überprüfen:

• Richtlinien für markdown-it-Plugin-Entwickler
• Vorhandene markdown-it-Plugins

Erweiterte Funktionalität mit Skripten hinzufügen

Für erweiterte Funktionalität können Erweiterungen Skripte beisteuern, die innerhalb der Markdown-Vorschau ausgeführt werden.

"contributes": {
    "markdown.previewScripts": [
        "./main.js"
    ]
}

Beigesteuerte Skripte werden asynchron geladen und bei jeder Inhaltsänderung neu geladen.

Die Erweiterung Markdown Preview Mermaid Support demonstriert die Verwendung von Skripten, um Mermaid-Diagramme und Flussdiagramm-Unterstützung zur Markdown-Vorschau hinzuzufügen. Sie können den Quellcode der Mermaid-Erweiterung auf GitHub einsehen.