Mermaid codeblock folding and copy button style issue

[pilgrimlyieu]

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

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

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

Actual behavior

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

[email protected] D:\blog
├── @renbaoshuo/[email protected]
├── @waline/[email protected]
├── [email protected] (git+ssh://[email protected]/pilgrimlyieu/hexo-admonition-lyieu.git#a1f7b48c316bdcf32e8c5045dd121f7486fac4ca)
├── [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]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

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]

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

[stevenjoezhang]

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]

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?

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

Yeah, that's strange.

[stevenjoezhang]

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]

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]

Thanks, it's normal now

[stevenjoezhang]

Great, I will merge it into the master branch.

[pilgrimlyieu]

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]

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]

You can check if the copy button is working now: 5c02480

[github-actions]

This issue has been added to the latest roadmap. 🎉

[pilgrimlyieu]

You can check if the copy button is working now: 5c02480

There's copy button now, but it can't make copy action. Also breaks normal codeblock.

[stevenjoezhang]

I've fixed it again, you can checkout this commit: ddecbe3

[pilgrimlyieu]

I've fixed it again, you can checkout this commit: ddecbe3

It works normally now. Appreciating your great work!