Compréhension approfondie du principe de mise en œuvre de l'aperçu markdown dans vscode

L'aperçu markdown de

vscode est une fonctionnalité que nous utilisons toute la journée. Vous êtes-vous déjà demandé comment elle est implémentée ? Peut-être qu'un jour vous recevrez une demande d'aperçu de démarque personnalisé. Que devez-vous faire ? [Apprentissage recommandé : "Tutoriel vscode"]

En fait, l'idée générale est relativement simple, qui consiste à créer un panneau de vue Web, à définir le contenu sur le html généré par markdown, puis à modifier le html de la vue Web de manière synchrone lorsque la démarque est mise à jour.

Analyse des idées

Créez une vue Web via vscode.window.createWebviewPanel, spécifiez qu'elle doit être ouverte sur le côté, puis définissez le code HTML via l'attribut webview.html de l'objet panneau.

html est généré via le contenu markdown de l'éditeur. Le contenu de l'éditeur est obtenu via editor.document.getText(), puis une bibliothèque de conversion tierce en markdown vers html est appelée pour le générer.

Cela termine l'aperçu du démarque.

Après la prévisualisation, vous devez le mettre à jour. Écoutez les événements de vscode.workspace.onDidSaveTextDocument et vscode.workspace.onDidChangeTextDocument. Lorsque le document est mis à jour et enregistré, récupérez le contenu de l'éditeur, régénérez le code HTML, puis définissez. à la vue Web.

webviewPanel prend en charge webview.postMessage(message); pour transmettre des messages et prend en charge une série de commandes telles que updateHTML, qui peuvent être déclenchées par la transmission de messages.

Mais comment savoir quel document met à jour quelle vue Web ?

Vous pouvez conserver une carte et l'enregistrer dans la carte lors de la création du webviewPanel. La clé est le chemin du fichier, de sorte que lors de la mise à jour, la vue Web correspondante puisse être trouvée et mise à jour.

De cette façon, la mise à jour du contenu markdown est terminée.

En fait, l'idée générale est relativement simple. Écrivons le code ci-dessous

Implémentation du code

Jetons un œil au code du plug-in amélioré vscode-markdown-preview. pour prévisualiser le démarque. Le code est assez simple. Peut être utilisé pour l'apprentissage.

(Le code suivant est un code simplifié)

Tout d'abord, le plug-in doit spécifier les conditions de déclenchement, c'est-à-dire spécifier activationEvents dans package.json :

"activationEvents": [
    "onLanguage:markdown",
    "onCommand:markdown-preview-enhanced.openPreviewToTheSide"
],

L'un est activé lors de la modification du contenu markdown, et l'autre est d'exécuter la commande le temps d'activer.

La logique d'activation spécifique est dans la méthode active :

export function activate(context: vscode.ExtensionContext) {

  const contentProvider = new MarkdownPreviewEnhancedView(context);

  context.subscriptions.push(
    vscode.commands.registerCommand(
      "markdown-preview-enhanced.openPreviewToTheSide",
      openPreviewToTheSide,
    ),
  );
  
  function openPreviewToTheSide(uri?: vscode.Uri) {
    let resource = uri;
    if (!(resource instanceof vscode.Uri)) {
      if (vscode.window.activeTextEditor) {
        resource = vscode.window.activeTextEditor.document.uri;
      }
    }
    contentProvider.initPreview(resource, vscode.window.activeTextEditor, {
      viewColumn: vscode.ViewColumn.Two,
      preserveFocus: true,
    });
  }
}

Nous avons enregistré la commande, et l'exécution de la commande obtiendra l'URL de l'éditeur actuel, puis prévisualisera la démarque.

Toute la logique d'aperçu est définie de manière centralisée dans l'objet d'instance de MarkdownPreviewEnhancedView, et initPreivew est exécuté lorsque la commande est déclenchée.

public async initPreview(
    sourceUri: vscode.Uri,
    editor: vscode.TextEditor,
    viewOptions: { viewColumn: vscode.ViewColumn; preserveFocus?: boolean },
) {
    // 创建 webview
    let previewPanel: vscode.WebviewPanel = vscode.window.createWebviewPanel(
        "markdown-preview-enhanced",
        `Preview ${path.basename(sourceUri.fsPath)}`,
        viewOptions
    );

    // 监听 webview 的消息
    previewPanel.webview.onDidReceiveMessage((message) => {});

    // 记录 webview 到 map 中
    this.previewMaps[sourceUri.fsPath] = previewPanel;
    
    // 拿到编辑器的文本，生成 html
    const text = editor.document.getText();
    engine
      .generateHTMLTemplateForPreview({inputString: text})
      .then((html) => {
        // 设置 html 到 previewPanel
        previewPanel.webview.html = html;
      });
}

Créez le webviewPanel dans initWebivew et enregistrez le webviewPanel sur la carte. La clé est le chemin du fichier du document. Obtenez le texte de l'éditeur pour générer du HTML et définissez-le sur webview.html, complétant ainsi l'aperçu markdown.

Une fois ce chemin terminé, nous avons implémenté l'aperçu des démarques.

Mais un simple aperçu ne suffit pas. Après la mise à jour du document, il doit être mis à jour automatiquement. Nous continuons à ajouter la surveillance des événements dans la méthode active :

  context.subscriptions.push(
    vscode.workspace.onDidSaveTextDocument((document) => {
      if (isMarkdownFile(document)) {
        contentProvider.updateMarkdown(document.uri, true);
      }
    }),
  );

  context.subscriptions.push(
    vscode.workspace.onDidChangeTextDocument((event) => {
      if (isMarkdownFile(event.document)) {
        contentProvider.update(event.document.uri);
      }
    }),
  );

Lors de la surveillance de la modification et de l'enregistrement du texte, appelez la méthode de mise à jour pour mettre à jour. .

public updateMarkdown(sourceUri: Uri) {

    // 从 map 中根据文件路径取出对应的 webviewPanel
    const previewPanel = this.previewMaps[sourceUri.fsPath];
    
    // 生成最新的 html 传递给 webview
    const text = document.getText();
    engine
        .parseMD(text)
        .then(({ markdown, html }) => {
            previewPanel.webview.postMessage({
              command: "updateHTML",
              html
            });
        }

}

Ici, nous transmettons le message de commande updateHTML au contenu html via webview.postMessage pour déclencher la mise à jour du contenu html.

De cette façon, nous avons obtenu un rafraîchissement synchrone des démarques.

Résumé

L'aperçu du markdown dans vscode est une fonction couramment utilisée mais pas difficile à mettre en œuvre. Nous avons examiné le code source du plug-in amélioré vscode-markdown-preview et clarifié le processus global :

.
• Grâce à vscode. window.createWebviewPanel crée un webviewPanel pour afficher le html
• html. Obtenez le contenu du texte via editor.document.getText() et générez-le via un package tiers. Définissez-le sur webviewPanel
• pour écouter l'espace de travail. .onDidSaveTextDocument et workspace.onDidChangeTextDocument pour obtenir le dernier contenu, puis générez du code HTML et mettez-le à jour vers webview en transmettant le message udpateHTML via webview.postMessage.
• Il convient de noter qu'une carte doit être enregistrée pour enregistrer la relation correspondante entre uri.fsPath et webviewPanel, afin que le contenu du texte change et mette à jour l'aperçu Markdown correspondant est une exigence courante mais pas difficile, et c'est le cas. également plus adapté pour débuter. Concernant le développement de plug-ins vscode, j'espère que cet article pourra vous aider à clarifier vos idées.

Introduction à la programmation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!