57 lines
1.6 KiB
HTML
57 lines
1.6 KiB
HTML
<!--
|
||
mermaid-js loader
|
||
-->
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js"></script>
|
||
|
||
<script>
|
||
$(function() {
|
||
function updateMermaid(event) {
|
||
if (event.source === window && event.data &&
|
||
event.data.direction === ModeToggle.ID) {
|
||
|
||
const mode = event.data.message;
|
||
|
||
if (typeof mermaid === "undefined") {
|
||
return;
|
||
}
|
||
|
||
let expectedTheme = (mode === ModeToggle.DARK_MODE? "dark" : "default");
|
||
let config = { theme: expectedTheme };
|
||
|
||
/* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
|
||
$(".mermaid").each(function() {
|
||
let svgCode = $(this).prev().children().html();
|
||
$(this).removeAttr("data-processed");
|
||
$(this).html(svgCode);
|
||
});
|
||
|
||
mermaid.initialize(config);
|
||
mermaid.init(undefined, ".mermaid");
|
||
}
|
||
}
|
||
|
||
let initTheme = "default";
|
||
|
||
if ($("html[mode=dark]").length > 0
|
||
|| ($("html[mode]").length == 0
|
||
&& window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
|
||
initTheme = "dark";
|
||
}
|
||
|
||
let mermaidConf = {
|
||
theme: initTheme /* <default|dark|forest|neutral> */
|
||
};
|
||
|
||
/* Markdown converts to HTML */
|
||
$("pre").has("code.language-mermaid").each(function() {
|
||
let svgCode = $(this).children().html();
|
||
$(this).addClass("unloaded");
|
||
$(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
|
||
});
|
||
|
||
mermaid.initialize(mermaidConf);
|
||
|
||
window.addEventListener("message", updateMermaid);
|
||
});
|
||
</script>
|