mermaid在html <details> 中无法被正确渲染

Description

<details>

<summary>fold</summary>

This is some text

```mermaid
graph LR
A --> B
B --> C
```

This is more text.

</details>

Contributor guide

Tech stack

javascripthtmlcssnodejs

Domain

frontenddeveloper experience

Issue type

bug

DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.

3

Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.

1-3 hours

Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.

fresh

ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.

mostly clear

Prerequisites

understanding of HTML <details> elementbasic knowledge of mermaid libraryfamiliarity with markdown preview plugin

Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.

60

Research direction

Investigate how mermaid renders diagrams in the markdown preview plugin. The issue occurs because mermaid likely initializes on page load and the <details> element hides its content initially, preventing mermaid from rendering inside it. Look into the plugin's mermaid initialization code (likely in a JavaScript file) and check if there is a mutation observer or event listener that re runs mermaid when the details are opened. Consider referencing mermaid documentation on handling dynamic content or hidden elements. A potential fix could involve triggering mermaid render when the 'toggle' event fires on the <details> element.