Vscode的Markdown预览是怎么实现的

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

专注于为中小企业提供成都网站建设、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业海淀免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

其实整体思路比较简单，就是创建一个 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：

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

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

具体激活的逻辑在 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, 
  
  
      }); 
  
  
    } 
  
  
  }

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

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

 
 
 
  
  
  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; 
  
  
        }); 
  
  
  }

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

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

但是只预览一次不行，更新文档之后需要自动更新，我们继续在 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); 
  
  
        } 
  
  
      }), 
  
  
    );

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

 
 
 
  
  
  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 
  
  
              }); 
  
  
          } 
  
  
   
  
  
  }

这里是通过 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 插件的开发，希望这篇文章能够帮大家理清思路。

文章标题：Vscode的Markdown预览是怎么实现的
转载来于：http://www.shufengxianlan.com/qtweb/news10/34210.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容