前几天总结了一下分布式事务的文字，由于写了一些解决方案的执行原理，用到了状态图，开开心心的在 Typora 上面显示的好好的，结果已发布到 hexo 博客，直接显示不出来！！！🕳
# 解决过程
然后比较官方网站的流程图页面的的 html 源码，发现流程图是由一个个 svg 标签，而自己的页面却没有，而直接拷贝这段 svg 到 public 文件夹下面的文件的 html 文件里面是可以正常显示的，这说明官方文档说的要在显示流程图的 html 文件中添加 mermaid 的 css 依赖是有正常加载的，那么只有一个可能就是由 markdown 构建 html 文件的时候除了问题！
各种找啊找，终于找到一个目录在 node_modules\hexo-renderer-multi-markdown-it\lib\renderer\markdown-it-mermaid 里面的 55-69 行的中间打上一个 console.log
md.renderer.rules.fence = (tokens, idx, options, env, self) => { | |
const token = tokens[idx] | |
const code = token.content.trim() | |
console.log(token.info + '<------' + (token.info === 'mermaid')) | |
if (token.info === 'mermaid') { | |
var firstLine = code.split(/\n/)[0].trim() | |
if (firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) { | |
firstLine = ' graph' | |
} else { | |
firstLine = '' | |
} | |
return mermaidChart(code, config, firstLine) | |
} | |
return defaultRenderer(tokens, idx, options, env, self) | |
} |
发现如果使用如下的代码块注释的时候，根本进入不到上面的调试代码
```mermaid | |
some content here | |
``` |
开始怀疑人生的时候，在 npx hexo server 打开的情况下，一个不小心将上面的的 mermaid 后面加上了一个 2，形如
```mermaid2 | |
some content here | |
``` |
结果控制台输出了
mermaid2<------false |
😓😓😓😓😓😓😓😓😓😓😓😓原来 mermaid 没有被识别为 token?? 但是如果改成 mermaid2 的话，Typora 又识别不了啊
# 最后解决方案
修改 node_modules\hexo-renderer-multi-markdown-it\lib\renderer\markdown-it-mermaid 文件的第 59 行的判断 if (token.info === 'Mermaid') { 这样在 Typora 编辑的时候也注意要第一个字母大写了😹, 勉强的解决方案
md.renderer.rules.fence = (tokens, idx, options, env, self) => { | |
const token = tokens[idx] | |
const code = token.content.trim() | |
console.log(token.info + '<------' + (token.info === 'Mermaid')) | |
if (token.info === 'Mermaid') { | |
var firstLine = code.split(/\n/)[0].trim() | |
if (firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) { | |
firstLine = ' graph' | |
} else { | |
firstLine = '' | |
} | |
return mermaidChart(code, config, firstLine) | |
} | |
return defaultRenderer(tokens, idx, options, env, self) | |
} |
有遇到这个问题并且完美解决的留言教我啊🙏🙏
