mermaid与marked结合使用
前提
两者都很强大，但是两者结合，存在问题，目前网上无解。
以下两种版都需要在index.html 即入口页面添加一个元素
<body>
<div id="root"></div>
<div hidden id="mermaidSvg"></div>
</body>
解决办法1
写一个拦截器即可
const renderer = {
count: 0,
code(code, type, escaped) {
if (type === 'mermaid') {
renderer.count++
mermaid.render('mermaidSvg', code, ((svgCode) => {
const svg = document.createElement('SVG');
svg.innerHTML = svgCode;
setTimeout(() => {
document.querySelector(`#mermaid-${renderer.count}`).innerHTML = '';
document.querySelector(`#mermaid-${renderer.count}`).appendChild(svg)
})
}))
return `<div class="language-mermaid" id='mermaid-${renderer.count}'>${code}</div>`;
}
return `<pre><code class="language-${type}" data-name="21">${code}</code></pre>`;
}
};
marked.use({ renderer });
解决办法2
如果你用到了代码高亮插件highlight，那么方式1就不可行了，会冲突，那么直接请在highlight的配置里改造就行
marked.setOptions({
count: 0,
renderer: new marked.Renderer(),
highlight(code, type) {
if (type === 'mermaid') {
this.count++
mermaid.render('mermaidSvg', code, ((svgCode) => {
const svg = document.createElement('SVG');
svg.innerHTML = svgCode;
setTimeout(() => {
document.querySelector(`#mermaid-${this.count}`).innerHTML = '';
document.querySelector(`#mermaid-${this.count}`).appendChild(svg)
})
}))
return `<div class="language-mermaid" id='mermaid-${this.count}'>${code}</div>`;
}
return hljs.highlightAuto(code).value;
}
});
效果
