渲染mermaid图时，出现渲染出来的图形元素的id是相同的，导致重叠。请各位帮忙看看

Tianci-blog commented 1 year ago

渲染mermaid图时，出现渲染出来的图形元素的id是相同的，导致重叠。请大佬帮忙看看

main.js 文件导入内容如下： // editor import VMdEditor from "@kangc/v-md-editor"; import "@kangc/v-md-editor/lib/style/base-editor.css"; // markdown import VMdPreview from "@kangc/v-md-editor/lib/preview"; import "@kangc/v-md-editor/lib/style/preview.css";

import githubTheme from "@kangc/v-md-editor/lib/theme/github.js"; import "@kangc/v-md-editor/lib/theme/style/github.css";

import createCopyCodePlugin from "@kangc/v-md-editor/lib/plugins/copy-code/index"; import "@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css";

import createHighlightLinesPlugin from "@kangc/v-md-editor/lib/plugins/highlight-lines/index"; import "@kangc/v-md-editor/lib/plugins/highlight-lines/highlight-lines.css";

import createTipPlugin from "@kangc/v-md-editor/lib/plugins/tip/index"; import "@kangc/v-md-editor/lib/plugins/tip/tip.css"; // mermaid import createMermaidPlugin from "@kangc/v-md-editor/lib/plugins/mermaid/cdn"; import "@kangc/v-md-editor/lib/plugins/mermaid/mermaid.css";

// highlightjs 核心代码 import hljs from "highlight.js/lib/core"; // 按需引入语言包 import json from "highlight.js/lib/languages/json"; import java from "highlight.js/lib/languages/java"; import javascript from "highlight.js/lib/languages/javascript";

hljs.registerLanguage("json", json); hljs.registerLanguage("java", java); hljs.registerLanguage("javascript", javascript);

// 插件 VMdPreview.use(githubTheme, { Hljs: hljs, }); VMdEditor.use(githubTheme, { Hljs: hljs, });

const app = createApp(App); const pinia = createPinia();

// VMdEditor.use(createTipPlugin()); VMdEditor.use(createCopyCodePlugin()); VMdEditor.use(createHighlightLinesPlugin()); VMdEditor.use(createMermaidPlugin()); app.use(VMdEditor); // VMdPreview.use(createTipPlugin()); VMdPreview.use(createCopyCodePlugin()); VMdPreview.use(createHighlightLinesPlugin()); VMdPreview.use(createMermaidPlugin()); app.use(VMdPreview);

Tianci-blog commented 1 year ago

dom元素补充，不知道各位有没有出现。

code-farmer-i commented 11 months ago

code-farmer-i / vue-markdown-editor

渲染mermaid图时，出现渲染出来的图形元素的id是相同的，导致重叠。请各位帮忙看看 #266