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

描述

<details>

<summary>fold</summary>

This is some text

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

This is more text.

</details>

贡献者指南

技术栈

javascripthtmlcssnodejs

领域

frontenddeveloper experience

议题类型

bug

难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。

3

预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。

1-3 hours

活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。

fresh

清晰度议题是否清楚说明期望改动、验收标准和下一步。

mostly clear

前置要求

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

新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。

60

研究方向

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.