mermaid 时序图与思维导图在halo文章页面中无法解析

解决方案:

在-->设置-->代码注入-->内容页head标签中填入下面的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.10.1/mermaid.min.js"></script>

然后在页脚中填入下面的代码:

 <script>
  // 在页面加载完成后执行
    document.addEventListener('DOMContentLoaded', (event) => {


      if(mermaid){
          // 配置 Mermaid 
        mermaid.initialize({
            sequence: {
                htmlLabels: true
            }
        });
        
        // 找到所有带有特定类的代码块
        const mermaidCodeBlocks = document.querySelectorAll('code.language-mermaid');
        
        // 遍历每个代码块并进行渲染
        mermaidCodeBlocks.forEach(block => {
            const container = document.createElement('div');
            container.classList.add('mermaid');
            container.textContent = block.textContent; // 复制代码内容
            block.parentNode.replaceChild(container, block); // 将<code>替换为<div>
        });
      }
      
    });
</script>

即可在内容也看到渲染好的图;

去看渲染->

去看渲染