服务器之家

服务器之家 > 正文

Vscode 的 Markdown 预览是怎么实现的

时间:2021-08-31 21:58     来源/作者:神光的编程秘籍

Vscode 的 Markdown 预览是怎么实现的

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 的事件,在文档更新和保存的时候,拿到编辑器的内容,重新生成 html,然后设置到 webview。

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

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

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

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

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

代码实现

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

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

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

  1. "activationEvents": [ 
  2.     "onLanguage:markdown"
  3.     "onCommand:markdown-preview-enhanced.openPreviewToTheSide" 
  4. ], 

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

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

  1. export function activate(context: vscode.ExtensionContext) { 
  2.  
  3.   const contentProvider = new MarkdownPreviewEnhancedView(context); 
  4.  
  5.   context.subscriptions.push( 
  6.     vscode.commands.registerCommand( 
  7.       "markdown-preview-enhanced.openPreviewToTheSide"
  8.       openPreviewToTheSide, 
  9.     ), 
  10.   ); 
  11.    
  12.   function openPreviewToTheSide(uri?: vscode.Uri) { 
  13.     let resource = uri; 
  14.     if (!(resource instanceof vscode.Uri)) { 
  15.       if (vscode.window.activeTextEditor) { 
  16.         resource = vscode.window.activeTextEditor.document.uri; 
  17.       } 
  18.     } 
  19.     contentProvider.initPreview(resource, vscode.window.activeTextEditor, { 
  20.       viewColumn: vscode.ViewColumn.Two, 
  21.       preserveFocus: true
  22.     }); 
  23.   } 

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

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

  1. public async initPreview( 
  2.     sourceUri: vscode.Uri, 
  3.     editor: vscode.TextEditor, 
  4.     viewOptions: { viewColumn: vscode.ViewColumn; preserveFocus?: boolean }, 
  5. ) { 
  6.     // 创建 webview 
  7.     let previewPanel: vscode.WebviewPanel = vscode.window.createWebviewPanel( 
  8.         "markdown-preview-enhanced"
  9.         `Preview ${path.basename(sourceUri.fsPath)}`, 
  10.         viewOptions 
  11.     ); 
  12.  
  13.     // 监听 webview 的消息 
  14.     previewPanel.webview.onDidReceiveMessage((message) => {}); 
  15.  
  16.     // 记录 webview 到 map 中 
  17.     this.previewMaps[sourceUri.fsPath] = previewPanel; 
  18.      
  19.     // 拿到编辑器的文本,生成 html 
  20.     const text = editor.document.getText(); 
  21.     engine 
  22.       .generateHTMLTemplateForPreview({inputString: text}) 
  23.       .then((html) => { 
  24.         // 设置 html 到 previewPanel 
  25.         previewPanel.webview.html = html; 
  26.       }); 

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

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

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

  1. context.subscriptions.push( 
  2.     vscode.workspace.onDidSaveTextDocument((document) => { 
  3.       if (isMarkdownFile(document)) { 
  4.         contentProvider.updateMarkdown(document.uri, true); 
  5.       } 
  6.     }), 
  7.   ); 
  8.  
  9.   context.subscriptions.push( 
  10.     vscode.workspace.onDidChangeTextDocument((event) => { 
  11.       if (isMarkdownFile(event.document)) { 
  12.         contentProvider.update(event.document.uri); 
  13.       } 
  14.     }), 
  15.   ); 

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

  1. public updateMarkdown(sourceUri: Uri) { 
  2.  
  3.     // 从 map 中根据文件路径取出对应的 webviewPanel 
  4.     const previewPanel = this.previewMaps[sourceUri.fsPath]; 
  5.      
  6.     // 生成最新的 html 传递给 webview 
  7.     const text = document.getText(); 
  8.     engine 
  9.         .parseMD(text) 
  10.         .then(({ markdown, html }) => { 
  11.             previewPanel.webview.postMessage({ 
  12.               command: "updateHTML"
  13.               html 
  14.             }); 
  15.         } 
  16.  

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

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

总结

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

  • 通过 vscode.window.createWebviewPanel 创建 webviewPanel 来显示 html
  • html 通过 editor.document.getText() 拿到文本内容之后通过第三方包生成,设置到 webviewPanel
  • 监听 workspace.onDidSaveTextDocument 和 workspace.onDidChangeTextDocument,来拿到最新内容,之后生成 html 通过 webview.postMessage 传递 udpateHTML 的消息来更新到 webview。
  • 要注意的是,需要记录一个 map 来保存 uri.fsPath 和 webviewPanel 的对应关系,实现文本内容改变更新对应的 webview 

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

原文链接:https://mp.weixin.qq.com/s/hLqx5RXxCHNfRE9ahvBsxg

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部