WWW.lllT.neT深入了解vscode中markdown浏览的完成基本原理

vscode 的 markdown 浏览是大家一天到晚都是在用的作用,是否有想过它是怎么完成的。也许有一天你能收到个订制 markdown 浏览的要求,应该怎么做呢?【建议学习培训:《vscode教程》】

实际上总体构思非常简单,便是建立一个 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浏览的完成基本原理的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:深入了解vscode中markdown浏览的完成基本原理发布于2021-12-07 16:56:01