hmol233
3 years ago
parent
45697ecdc1
commit
db3c7540e5
@ -1,8 +1,10 @@
|
||||
import { defineClientAppEnhance } from "@vuepress/client";
|
||||
import Tab from "./components/Tab.vue";
|
||||
import Tabs from "./components/Tabs.vue";
|
||||
import Mermaid from "./components/Mermaid.vue";
|
||||
|
||||
export default defineClientAppEnhance(({ app, router, siteData }) => {
|
||||
app.component("Tab", Tab);
|
||||
app.component("Tabs", Tabs);
|
||||
app.component("Mermaid", Mermaid);
|
||||
});
|
||||
|
||||
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div v-html="payload.innerHtml"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent,
|
||||
onMounted,
|
||||
nextTick,
|
||||
toRef,
|
||||
watch,
|
||||
reactive,
|
||||
} from "vue";
|
||||
import { useDarkMode } from "@vuepress/theme-default/lib/client";
|
||||
export default defineComponent({
|
||||
name: "Mermaid",
|
||||
props: {
|
||||
identifier: String,
|
||||
graph: String,
|
||||
},
|
||||
setup(props) {
|
||||
const dark = useDarkMode();
|
||||
const chartID = toRef(props, "identifier");
|
||||
const rawGraph = toRef(props, "graph");
|
||||
const html = reactive({ innerHtml: "" });
|
||||
onMounted(() => {
|
||||
nextTick(async function () {
|
||||
console.log(chartID, rawGraph);
|
||||
const mermaid = await import("mermaid");
|
||||
mermaid.default.initialize({
|
||||
startOnLoad: false,
|
||||
theme: dark.value ? "dark" : "default",
|
||||
});
|
||||
mermaid.default.render(
|
||||
chartID.value,
|
||||
rawGraph.value,
|
||||
(svgCode, bindFunc) => {
|
||||
html.innerHtml = svgCode;
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
watch(dark, async () => {
|
||||
const mermaid = await import("mermaid");
|
||||
mermaid.default.initialize({
|
||||
startOnLoad: false,
|
||||
theme: dark.value ? "dark" : "default",
|
||||
});
|
||||
mermaid.default.render(
|
||||
chartID.value,
|
||||
rawGraph.value,
|
||||
(svgCode, bindFunc) => {
|
||||
html.innerHtml = svgCode;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
tag: chartID,
|
||||
payload: html,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,25 @@
|
||||
// Reference: https://github.com/mermaid-js/mermaid
|
||||
|
||||
import { PluginSimple } from "markdown-it/lib";
|
||||
import { hash } from "@vuepress/utils";
|
||||
|
||||
const MermaidPlugin: PluginSimple = function (md) {
|
||||
const fence = md.renderer.rules.fence;
|
||||
md.renderer.rules.fence = (...args) => {
|
||||
const [tokens, idx] = args;
|
||||
const { info } = tokens[idx];
|
||||
if (info.trim(" ") === "mermaid") {
|
||||
const token = tokens[idx];
|
||||
const key = `mermaid_${hash(idx)}`;
|
||||
let { content } = token;
|
||||
content = content.replaceAll(";\n", ";");
|
||||
content = content.replaceAll("\n\n", ";");
|
||||
content = content.replaceAll("\n", ";");
|
||||
return `<Mermaid identifier="${key}" graph="${content}"></Mermaid>`;
|
||||
}
|
||||
const rawCode = fence(...args);
|
||||
return `${rawCode}`;
|
||||
};
|
||||
};
|
||||
|
||||
export { MermaidPlugin };
|
||||
Loading…
Reference in new issue