mermaid渲染

[wlkla]

我在script中引用了mermaid的js文件，但是网站并没有正确渲染并显示，我该怎么正确调用并添加script呢

[Meekdai]

你添加的时候，后面没有添加</script>

[wlkla]

我后面又修改了，发现还是不行，看了一下网页代码发现应该是显示代码时将mermaid代码拆成了多个部分，然后逐个渲染显示，导致不能正确识别完整代码，我就重新编写了一个渲染脚本：

// 等待DOM完全加载
document.addEventListener('DOMContentLoaded', function() {
    // 查找所有包含Mermaid代码的元素
    var mermaidDivs = document.querySelectorAll('.highlight-source-mermaid');

    mermaidDivs.forEach(function(div) {
        // 提取Mermaid代码
        var codeElement = div.querySelector('code');
        if (codeElement) {
            var mermaidCode = codeElement.textContent;

            // 创建新的div来放置渲染后的图表
            var renderDiv = document.createElement('div');
            renderDiv.className = 'mermaid';
            renderDiv.textContent = mermaidCode;

            // 替换原来的pre元素
            var preElement = div.querySelector('pre');
            if (preElement) {
                preElement.parentNode.replaceChild(renderDiv, preElement);
            }
        }
    });

    // 初始化Mermaid
    mermaid.initialize({ startOnLoad: true });
});

然后就可以正确显示了，但是有一个小问题就是此时复制按钮没法复制完整代码，仅复制渲染后图片中文字，我暂时没有修复这个小bug，希望哪位大佬有空帮忙完善一下