Maison >outils de développement >VSCode >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.
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
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.
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 :
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!