深入瞭解vscode中markdown預覽的實現原理

的 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預覽的實現原理的詳細內容，更多請關注TW511.COM其它相關文章！