Vscode 的 Markdown 预览是怎么实现的

发布时间：2025-11-04 20:17:54 来源：云智核 作者：域名

vscode 的览实 markdown 预览是我们整天都在用的功能，有没有想过它是览实怎么实现的。或许有一天你会接到个定制 markdown 预览的览实需求，应该怎么做呢?览实

有什么思路么?思考五秒钟。

5

4

3

2

1

其实整体思路比较简单，览实就是览实创建一个 webview panel，设置内容为 markdown 生成的览实 html，之后在 markdown 更新的览实时候同步修改 webview 的 html 就可以了。

思路分析

通过 vscode.window.createWebviewPanel 创建一个 webview，览实指定在侧边打开，览实之后通过该 panel 对象的览实 webview.html 属性来设置 html。

html 是览实通过编辑器的 markdown 内容生成的， 编辑器内容通过 editor.document.getText() 拿到，览实然后调用第三方的览实 markdown 转 html 的库来生成。

这样就完成了 markdown 的览实预览。

预览之后需要更新，监听 vscode.workspace.onDidSaveTextDocument 和 vscode.workspace.onDidChangeTextDocument 的b2b信息网事件，在文档更新和保存的时候，拿到编辑器的内容，重新生成 html，然后设置到 webview。

webviewPanel 支持 webview.postMessage(message); 的方式传递消息，支持 updateHTML 等一系列 command，可以通过传递消息来触发。

但是怎么知道哪个文档更新哪个 webview 呢?

可以维护一个 map，在创建 webviewPanel 的时候记录到 map 中，key 为文件路径，这样更新的时候就能查找到对应的 webview 进行更新。

这样，就完成了 markdown 内容的更新。

其实整体思路还是比较简单的，下面我们来写下代码：

代码实现

我们看下 vscode-markdown-preview-enhanced 的插件的代码，这也是一个预览 markdown 的插件，代码还算简洁，可以用来学习。免费源码下载

(以下代码是简化后的代码)

首先，插件要指定触发的条件，也就是在 package.json 里面指定 activationEvents：

这里一个是编辑 markdown 内容的时候激活，一个是执行 command 的时候激活。

具体激活的逻辑在 active 方法里：

我们注册了那个 command，执行 command 会拿到当前 editor 的 url，然后进行 markdown 的 preview。

preview 的所有逻辑都集中定义在了 MarkdownPreviewEnhancedView 的实例对象中，在 command 触发时执行 initPreivew。

在 initWebivew 里面创建 webviewPanel，同时把 webviewPanel 保存到 map 中，key 为文档的文件路径。拿到编辑器文本来生成 html，设置到 webview.html，这样就完成了 markdown 的预览。WordPress模板

这条路径走通之后，我们就实现了 markdown 的预览。

但是只预览一次不行，更新文档之后需要自动更新，我们继续在 active 方法里添加事件监听：

监听文本修改和保存的时候，调用 update 方法来更新。

这里是通过 webview.postMessage 给 html 内容传递 updateHTML 的 command 消息，触发 html 内容的更新。

这样，我们就实现了 markdown 的同步刷新。

总结

vscode 里面 markdown 的预览是一个常用但实现起来并不难的功能，我们看了下 vscode-markdown-preview-enhanced 插件的源码，理清了整体的流程：

markdown 的预览是一个常见但是并不难的需求，也比较适合入门 vscode 插件的开发，希望这篇文章能够帮大家理清思路。

相关文章