mirror of
https://github.com/mermaid-js/mermaid.git
synced 2024-08-27 20:51:30 +02:00
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
|
|
import shiki from 'shiki';
|
|
|
|
export default {
|
|
config: async (md) => {
|
|
MermaidMarkdown(md);
|
|
const fence = md.renderer.rules.fence.bind(md.renderer.rules);
|
|
|
|
const highlighter = await shiki.getHighlighter({ theme: 'material-palenight' });
|
|
|
|
md.renderer.rules.fence = (tokens, index, options, env, slf) => {
|
|
const token = tokens[index];
|
|
|
|
if (token.info.trim() === 'mermaid-example') {
|
|
let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
|
|
code = code.replace('#2e3440ff', 'transparent');
|
|
code = code.replace('#292D3E', 'transparent');
|
|
code =
|
|
'<h5>Code:</h5>' +
|
|
'<div class="language-mermaid"><button class="copy"></button><span class="lang">mermaid</span>' +
|
|
code +
|
|
'</div>';
|
|
|
|
// return code;
|
|
return `${code}
|
|
<h5>Render:</h5>
|
|
<Mermaid id="me${index}" graph="${encodeURIComponent(token.content)}"></Mermaid>`;
|
|
}
|
|
return fence(tokens, index, options, env, slf);
|
|
};
|
|
},
|
|
};
|