mermaid doesn't work again

[lucmann]

Issue Checklist

• I am using NexT version 8.0 or later.
• I have already read the Troubleshooting page of Hexo and Troubleshooting page of NexT.
• I have already searched for current issues, which does not help me.

Expected behavior

Actual behavior

• Links to demo site with this issue: https://lucmann.github.io/gfx/xcb/
• Links to repository or source code of the blog: https://github.com/lucmann/lucmann.github.io
• Screenshots:
  

It seems like the backtick-style mermaid should have worked since a396c61 as described in #347. It is a bit odd that doesn't look like working these days

Steps to reproduce the behavior

0. cd /path/to/blog
1. hexo clean
2. hexo generate
3. hexo server

Node.js and NPM Information

v14.17.5
6.14.14

Package dependencies Information

[email protected] /home/luc/gh/blog
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

### Hexo Configuration

```YAML
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Eureka
subtitle: ''
description: ''
keywords:
author: Luc
language: en
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://lucmann.github.io
root: /
permalink: :title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true
relative_link: false
future: true
highlight:
  exclude_languages:
    - mermaid
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 0
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

archive_generator:
  per_page: 0
  yearly: false
  monthly: false
  daily: false

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
updated_option: mtime
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 0
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

math:
  engine: katex
  katex:
    css: https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css
    js: https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js
    options:
      output: mathml
      displayMode: true
      minRuleThickness: 0.06
      throwOnError: false

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: [email protected]:lucmann/lucmann.github.io.git
  branch: master

### NexT Configuration

```YAML
diff --git a/_config.yml b/_config.yml
index 34809c6..6e1d939 100644
--- a/_config.yml
+++ b/_config.yml
@@ -37,8 +37,8 @@ custom_file_path:
 # ---------------------------------------------------------------
 
 # Schemes
-scheme: Muse
-#scheme: Mist
+#scheme: Muse
+scheme: Mist
 #scheme: Pisces
 #scheme: Gemini
 
@@ -96,11 +96,11 @@ open_graph:
 # Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
 # External url should start with http:// or https://
 menu:
-  #home: / || fa fa-home
-  #about: /about/ || fa fa-user
-  #tags: /tags/ || fa fa-tags
-  #categories: /categories/ || fa fa-th
-  #archives: /archives/ || fa fa-archive
+  home: / || fa fa-home
+  about: /about/ || fa fa-user
+  tags: /tags/ || fa fa-tags
+  categories: /categories/ || fa fa-th
+  archives: /archives/ || fa fa-archive
   #schedule: /schedule/ || fa fa-calendar
   #sitemap: /sitemap.xml || fa fa-sitemap
   #commonweal: /404/ || fa fa-heartbeat
@@ -118,7 +118,7 @@ menu_settings:
 
 sidebar:
   # Sidebar position. Available values: left | right
-  position: left
+  position: right
 
   # Sidebar width.
   # Applicable to Muse | Mist and mobile of Pisces | Gemini.
@@ -157,8 +157,8 @@ site_state: true
 # Key is the link label showing to end users.
 # Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
 social:
-  #GitHub: https://github.com/yourname || fab fa-github
-  #E-Mail: mailto:[email protected] || fa fa-envelope
+  GitHub: https://github.com/lucmann || fab fa-github
+  E-Mail: mailto:[email protected] || fa fa-envelope
   #Weibo: https://weibo.com/yourname || fab fa-weibo
   #Twitter: https://twitter.com/yourname || fab fa-twitter
   #FB Page: https://www.facebook.com/yourname || fab fa-facebook
@@ -400,7 +400,7 @@ reading_progress:
 
 # Bookmark Support
 bookmark:
-  enable: false
+  enable: true
   # Customize the color of the bookmark.
   color: "#222"
   # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
@@ -533,10 +533,10 @@ pdf:
 
 # Mermaid tag
 mermaid:
-  enable: false
+  enable: true
   # Available themes: default | dark | forest | neutral
   theme:
-    light: default
+    light: forest
     dark: dark
 
 # WaveDrom tag
@@ -568,7 +568,7 @@ math:
     tags: none
 
   katex:
-    enable: false
+    enable: true
     # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
     copy_tex: false
 
@@ -838,7 +838,7 @@ firestore:
 # Show Views / Visitors of the website / page with busuanzi.
 # For more information: http://ibruce.info/2015/04/04/busuanzi/
 busuanzi_count:
-  enable: false
+  enable: true
   total_visitors: true
   total_visitors_icon: fa fa-user
   total_views: true
@@ -862,7 +862,7 @@ algolia_search:
 # Local Search
 # Dependencies: https://github.com/next-theme/hexo-generator-searchdb
 local_search:
-  enable: false
+  enable: true
   # Show top n results per article, show all results by setting to -1
   top_n_per_article: 1
   # Unescape html strings to the readable one.

Other Information

• NexT version: 8.21.0

[welcome]

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

[lucmann]

i find out what's more interesting is that as long as there is one mermaid block is embedded with syntax {% mermaid type %}, the rest of mermaid diagrams (even remain backtick-style) in the same post will be rendered as well.

See the rendered output and its markdown:
[1]https://lucmann.github.io/gfx/dri3/
[2]https://github.com/lucmann/lucmann.github.io/blob/dev/source/_posts/gfx/dri3.md

[stevenjoezhang]

@lucmann You can try running hexo clean. After commit 6742735, the structure for Mermaid changed to <pre><code class="mermaid">, but your site still uses the old version <pre class="mermaid">, which is why it can't render properly.

[lucmann]

Unfortunately hexo clean doesn't manage to generate <pre><code class="mermaid"> yet. I try running the following hexo commands in my local blog directory (branch dev) (I don't know how to hexo clean in GitHub Actions where my blog is deployed)

hexo clean
hexo generate
hexo server

The issue is still out there. I grep the changes you mentioned in the resulting html, it seems like nothing has changed. Am I missing something?

<pre class="mermaid">flowchart TD
<pre class="mermaid">classDiagram
<pre class="mermaid">sequenceDiagram
<pre class="mermaid">sequenceDiagram
<pre class="mermaid">flowchart TD
<pre class="mermaid">graph TD
<pre class="mermaid">flowchart TD
<pre class="mermaid">sequenceDiagram
<pre class="mermaid">sequenceDiagram
<pre class="mermaid">graph TD
<pre class="mermaid">flowchart LR
<pre class="mermaid">classDiagram

[stevenjoezhang]

Please try to uninstall the hexo-filter-mermaid-diagrams plugin. NexT has already provided complete support for mermaid, and installing third-party plugins may cause conflicts.

[lucmann]

Yes, with hexo-filter-mermaid-diagrams uninstalled, it works like a charm. thanks very much! @stevenjoezhang

diff --git a/package.json b/package.json
index de2b7846..f612ba73 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
     "cnpm": "^7.1.0",
     "hexo": "^7.3.0",
     "hexo-deployer-git": "^3.0.0",
-    "hexo-filter-mermaid-diagrams": "^1.0.5",
     "hexo-generator-archive": "^1.0.0",
     "hexo-generator-category": "^1.0.0",
     "hexo-generator-index": "^2.0.0",