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

问题

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

https://lz38.github.io/2022/04/06/Markdown中Mermaid的使用/#Hexo对Mermaid的支持

究竟原因，是因为 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