Mermaid codeblock folding and copy button style issue

pilgrimlyieu commented 2 months ago

Issue Checklist

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

Expected behavior

Fold other codeblock, but don't fold mermaid codeblock.

non-fold

It would be better if there's a copy button on mermaid codeblock as shown below by the way.

Actual behavior

fold

Steps to reproduce the behavior

flowchart LR
    subgraph 11[ ]
        direction TB
        1' & u' & 0'
    end
    subgraph 22[ ]
        direction LR
        u & 1 & 0 & v
    end
    u --- 0 & 1 --- v
    1 -.-> 1'
    0 -.-> 0'
    u & v -.-> u'

Node.js and NPM Information

v20.11.1
10.2.4

Package dependencies Information

hexo-site@0.0.0 D:\blog
├── @renbaoshuo/markdown-it-katex@2.0.2
├── @waline/hexo-next@3.0.1
├── hexo-admonition-lyieu@2.3.2 (git+ssh://git@github.com/pilgrimlyieu/hexo-admonition-lyieu.git#a1f7b48c316bdcf32e8c5045dd121f7486fac4ca)
├── hexo-browsersync@0.3.0
├── hexo-deployer-git@4.0.0
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-feed@3.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-searchdb@1.4.1
├── hexo-generator-tag@2.0.0
├── hexo-hide-posts@0.4.2
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-markdown-it@7.1.0
├── hexo-renderer-stylus@3.0.0
├── hexo-server@3.0.0
├── hexo-symbols-count-time@0.7.1
├── hexo-theme-landscape@1.0.0
├── hexo@7.1.1
├── katex@0.16.10
├── markdown-it-abbr@1.0.4
├── markdown-it-cjk-breaks@1.1.3
├── markdown-it-emoji@2.0.2
├── markdown-it-merge-cells@2.0.0
├── markdown-it-multimd-table@4.2.3
├── markdown-it-sub@1.0.0
├── markdown-it-sup@1.0.0
├── markdown-it-task-list-plus@2.1.3
└── markdown-it@13.0.1

Hexo Configuration

Irrelevant

NexT Configuration

codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: gruvbox-light
    dark: gruvbox-dark
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac
  # Fold code block
  fold:
    enable: true
    threshold: 500

Other Information

Relevant to #694.

Besides, it works as expected sometimes.

Have issue: https://pilgrimlyieu.github.io/notes/D-discrete-mathematics/13-lattice#%E6%A0%BC%E5%90%8C%E6%80%81

Front matter

title: 格
date: 2024-05-07 10:16:06
updated: 2024-05-07 10:16:06
description:
draft: false
comments: true
disableNunjucks: true
katex: true

No issue: https://pilgrimlyieu.github.io/daily/2024-04#Mermaid

Front matter

title: 2024 年 4 月记事板
date: 2024-04-05 19:55:12
updated: 2024-04-30 21:14:05
comments: true
description: 
draft: false
disableNunjucks: true
katex: true

pilgrimlyieu commented 2 months ago

dbea55806e6825f2e0c1628c73e62017

On Android side. This is the perfect I think, with a copy button and no fold.

stevenjoezhang commented 2 months ago

I am unable to reproduce this bug; the mermaid code block on your webpage is not folded. Can you confirm if the issue still exists?

pilgrimlyieu commented 2 months ago

I am unable to reproduce this bug; the mermaid code block on your webpage is not folded. Can you confirm if the issue still exists?

info info2 tags

https://github.com/pilgrimlyieu/pilgrimlyieu.github.io/blob/5f94677fa7f9749a9356e61c94d8e6b30f67ae67/notes/D-discrete-mathematics/13-lattice.html#L320-L332

Yeah, that's strange.

stevenjoezhang commented 2 months ago

One possible scenario is that a race condition has occurred here. The mermaid script loads slowly, so the mermaid source code is initially treated as a regular code block with fold and copy buttons added, and only afterward is it rendered to svg format.

stevenjoezhang commented 2 months ago

I pushed to the mermaid branch: https://github.com/next-theme/hexo-theme-next/tree/mermaid You can check if it solves the issue

pilgrimlyieu commented 2 months ago

Thanks, it's normal now

stevenjoezhang commented 2 months ago

Great, I will merge it into the master branch.

pilgrimlyieu commented 2 months ago

Great, I will merge it into the master branch.

Sadly, the copy button disappears too. Should I open a new issue for this feature request?

stevenjoezhang commented 2 months ago

The copy button is actually a bug; it requires the code block style to function properly. If users select a different highlighting engine (prismjs), style errors may occur. I will look into how to handle this when I have time later.

stevenjoezhang commented 2 months ago

You can check if the copy button is working now: https://github.com/next-theme/hexo-theme-next/commit/5c024800e6b484f844783ad379758e3e57f7a4b3