Use code fence token mermaid instead of mermaidjs

[joshuacurtiss]

I've noticed that existing mermaid plugins for VuePress 1.x use the fenced code block token mermaid instead of mermaidjs. I'm just curious, is there a reason for this divergence that would cause code migrated from a VuePress 1.x environment to have these changed?

I recommend adding support to check for mermaid in addition to mermaidjs in markdown-it-mermaid.ts. Does this make sense? Let me know what you think!

[Renovamen]

Hi, please see this comment in #21:

VuePress uses Prism as default syntax highlighter, which supports language mermaid in PrismJS/prism#3050.

That means, Prism will try to render the content in a fenced code block with token mermaid as a highlighted code block. Thus if we still use token mermaid in plugin-mermaid, there will be a conflict between it and Prism.

I know this breaking change will cause inconvenience, but it's the only workaround that come to my mind.

[joshuacurtiss]

Thanks, I understand. What are your thoughts on making the token settable in options, then those who desire to change it are free to do so without needing to fork or make a custom markdown-it-mermaid.ts? Thanks for your consideration! 😄

[Renovamen]

Sounds reasonable, I'll have a try.

[Renovamen]

Supported in v2.0.0-alpha.19. Now you can customize the token by:

module.exports = {
  plugins: [
    [
      "@renovamen/vuepress-plugin-mermaid", {
        token: "mermaid"
      }
    ]
  ]
}

Thanks!

[joshuacurtiss]

Perfect! Thank you very much!