How to enable mermaid tag

xfdj commented 4 years ago

Please follow this Issue template to provide relevant information, such as source code repositories, blog links, and screenshots, which will help us investigate. 请按照此 Issue 模版提供相关信息，例如源码仓库、博客链接和屏幕截图，这将有助于我们进行调查。

Issue Checklist

[x] I am using the latest version of NexT.
[x] I have read the relevant documents of Hexo and NexT.
[x] I have reviewed the latest Roadmap on GitHub and searched for current issues, which does not help me.

Expected behavior

After enabling mermaid tag (set mermaid: enable: true) in themes/next/_config.yml, mermaid code block in .md should render corresponding graphs. for example:

Actual behavior

Links to demo site with this issue: N/A
Links to repository or source code of the blog: N/A

see the screenshot below.

Steps to reproduce the behavior

write mermaid code in post article.
modify theme/next/_config.yml and set "mermaid: enable: true"
hexo g -d

Environment Information

Node.js and NPM Information

v12.18.0
6.14.4

Package dependencies Information

hexo-site@0.0.0 somepath\blog
+-- core-js@3.6.5
+-- eslint@7.0.0
+-- eslint-visitor-keys@1.1.0
+-- hexo@4.2.0
+-- hexo-deployer-git@2.1.0
+-- hexo-excerpt@1.1.6
+-- hexo-generator-archive@1.0.0
+-- hexo-generator-category@1.0.0
+-- hexo-generator-index@1.0.0
+-- hexo-generator-searchdb@1.3.0
+-- hexo-generator-tag@1.0.0
+-- hexo-helper-live2d@3.1.1
+-- hexo-renderer-ejs@1.0.0
+-- hexo-renderer-pandoc@0.3.0
+-- hexo-renderer-stylus@1.1.0
+-- hexo-server@1.0.0
+-- hexo-spoiler@1.5.2
+-- hexo-symbols-count-time@0.7.1
+-- hexo-tag-dplayer@0.3.3
+-- live2d-widget-model-epsilon2_1@1.0.5
+-- live2d-widget-model-hibiki@1.0.5
+-- live2d-widget-model-izumi@1.0.5
+-- live2d-widget-model-koharu@1.0.5
+-- live2d-widget-model-miku@1.0.5
+-- live2d-widget-model-shizuku@1.0.5
+-- live2d-widget-model-tororo@1.0.5
+-- live2d-widget-model-z16@1.0.5
+-- lozad@1.14.0
+-- pangu@4.0.7
`-- webpack@4.43.0

Hexo Configuration

NexT Configuration

footer:
  powered: false

menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  archives: /archives/ || fa fa-archive

scheme: Mist

sidebar:
  position: right
  display: hide
  onmobile: true

toc:
  wrap: true

symbols_count_time:
  separated_meta: false
  item_text_post: true
  item_text_total: true
  awl: 2
  wpm: 300
  suffix: mins.

tag_icon: true

codeblock:
  copy_button:
    enable: true
    show_result: true

math:
  per_page: false
  mathjax:
    enable: true
    mhchem: true

local_search:
  enable: true
  preload: true

note:
  style: modern
  icons: true

motion:
  transition:
    post_header: slideUpBigIn
    post_body: slideUpBigIn
    coll_header: slideUpBigIn

fancybox: true

lazyload: true

pangu: true

minify: true

mermaid:
  enable: true

Other Information

the second code block should be mermaid graph when everything is right.

welcome[bot] commented 4 years ago

Thanks for opening this issue, maintainers will get back to you as soon as possible!

issue-label-bot[bot] commented 4 years ago

Issue-Label Bot is automatically applying the label Question to this issue, with a confidence of 0.69. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

sli1989 commented 4 years ago

https://theme-next.js.org/docs/tag-plugins/mermaid.html?highlight=mermaid 帮助文档

NexT
Mermaid
NexT User Docs – NexT Supported Tags – Mermaid

xfdj commented 4 years ago

Thank you very much, but hope that mermaid's grammar will be compatible with markdown's original grammar in the future.

theme-next / hexo-theme-next