It works wrong in [email protected] and [email protected]

[YuanchenZhu2020]

Behaviour

When I use it in [email protected], it shows Syntax error in graph on the page.

Version

NexT version 8.0.1
hexo: 5.2.0
hexo-cli: 4.2.0
os: Windows_NT 10.0.19041 win32 x64
node: 12.18.3
mermaid.js: 8.8.1

[leostudiooo]

Have you made sure that you write the code in the correct syntax?

[YuanchenZhu2020]

I used the example code from Mermaid Live Editor as below and it still shows Syntax error in graph:

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

I couldn't give a screenshot because it was nearly one year ago. But I have find some possible reasons:

1. the copy_button setting under codeblock. If enable it, the <div class="copy-btn"> tag will obstruct the rendering work of mermaid.js.
2. see add lt escape #7 and fix mermaid classDiagram syntax error #14.

So I made the following changes:

1. change the code in render.js to:

   return `${start}<pre><div class="mermaid">${content}</div></pre>${end}`;
   

2. apply fix mermaid classDiagram syntax error #14

I'm not familiar with hexo plugin, so I didn't submit the code. But it worked well in my blog:

[Westlifers]

Simply try modifying footer.ejs(or any ejs file that make part of tag) in your theme folder, not after-footer.ejs in hexo-cli folder. I've figured it out in this way.