VSCode添加对markdown扩展语法的支持 | 技术

问题

在老博客里我曾提到过一个问题：

lz37.github.io

Markdown中Mermaid的使用

概述什么是Mermaid？ Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表。项目地址：https://github.com/mermaid-js/mermaid 怎么使用Mermaid？使用特定的Mermaid渲染器；使用集成了Mermaid渲染功能的Markdown编辑器，如Typora。使用时，需要

https://lz38.github.io/2022/04/06/Markdown%E4%B8%ADMermaid%E7%9A%84%E4%BD%BF%E7%94%A8/#Hexo%E5%AF%B9Mermaid%E7%9A%84%E6%94%AF%E6%8C%81

究竟原因，是因为 markdown 原生语法不支持类似于 $\{\%\ mermaid\ \%\}$ 一类的标签，这是属于 hexo 一些主题的自带语法

原本没什么问题，写老博客的时候，尚且还可以使用代码块书写 mermaid，但是换到新博客的时候不知怎么了，代码块形式的 mermaid 竟然不支持了

这对我造成了不小的困扰，毕竟使用拓展的语法，编辑器无法帮助渲染，做不到实时预览，每次都只能编辑好后再将代码块上下的反引号再改成标签，非常的不人性化。

但今天在网上查询资料的时候，忽然看到了解决方法

参考资料传送门：利用 vscode 插件与 git hook 提升 hexo 编写部署体验

于是我想到可以利用一样的方法，把 $\{\%\ mermaid\ \%\}$ 映射成mermaid 代码块不就好了？

解决

首先安装Markdown Preview Enhanced插件

F1 输入Markdown Preview Enhanced: Extend Parser调出插件的parse.js文件，修改其中的onWillParseMarkdown方法

module.exports = {
  onWillTransformMarkdown: function (markdown) {
    return new Promise((resolve, reject) => {
      markdown = markdown.replace(/\{%\s*mermaid\s*%\}\n/g, (whole, content) => `\`\`\`mermaid\n`);
      markdown = markdown.replace(/\{%\s*endmermaid\s*%\}\n/g, (whole, content) => `\`\`\`\n`);
      return resolve(markdown);
    });
  },
  // ...
};

这下，在 vscode 中的 $\{\%\ mermaid\ \%\}$ 与 $\{\%\ endmermaid\ \%\}$ 两个标签包裹中的内容即可被成功渲染

优化

没必要使用这个方法，配置文件还不好迁移。

建议在博客项目下开个子项目，项目名以Hexo开头

在index.js文件中写上如下代码：

/** @type {import("hexo")} */
hexo.extend.filter.register(
  "before_post_render",
  (data) => {
    const reg = /```mermaid([\s\S]+?)```/g;
    // 替换
    data.content = data.content.replace(reg, (_, codeBlockContent) => {
      return `{% mermaid %}
      ${codeBlockContent}
      {% endmermaid %}`;
    });
  },
  0, // 表示第一个执行
);

mermaid 代码块会按正则被替换为标签形式

不过要注意日常写的时候，不要随便写符合 mermaid 代码块的正则，否则会出现渲染错误。

文档参考：Hexo: Filter