search

webappdevelp / hexo-filter-mermaid-diagrams

mermaid diagrams for hexo
86 stars 27 forks source link

It works wrong in hexo@5.2.0 and hexo-theme-next@8.0.1 #11

Open YuanchenZhu2020 opened 4 years ago

YuanchenZhu2020 commented 4 years ago

Behaviour

When I use it in hexo@5.2.0, 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 commented 3 years ago

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

YuanchenZhu2020 commented 3 years ago

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 #7 and #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 #14

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

1

Westlifers commented 2 years ago

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.