feat(editor-md): 添加公式渲染、plantuml渲染DEMO示例 (DevCloudFE#1737)

Author: GreatZPP

packages/devui-vue/docs/components/editor-md/index.md

@@ -232,6 +232,90 @@ export default defineComponent({
 editor-md/checkbox
 :::
 
+### 数学公式 渲染
+
+:::demo 通过配置md-plugins katex插件，进行数学公式渲染。
+
+```vue
+<template>
+  <d-editor-md
+    v-model="content"
+  >
+  </d-editor-md>
+  <!-- <d-editor-md
+    v-model="content"
+    :md-plugins="plugins"
+  >
+  </d-editor-md> -->
+</template>
+
+<script>
+import { defineComponent, reactive, ref } from 'vue';
+// import mk from '@ittakahiro/markdown-it-katex';  // 请首先安装 @ittakahiro/markdown-it-katex 依赖
+
+export default defineComponent({
+  setup() {
+    const content = ref(`$E = mc^2$
+$\\sqrt{3x-1}+(1+x)^2$  // DEMO无法进行import，使用时请放开代码中注释
+    `);
+
+    mdPlugins = [{
+      // plugin: mk
+    }];
+
+    return { content, mdPlugins };
+  },
+});
+</script>
+```
+
+:::
+
+### PlantUML 渲染
+
+:::demo 通过配置md-plugins plantuml插件，进行plantuml图渲染。
+
+```vue
+<template>
+  <d-editor-md
+    v-model="content"
+  >
+  </d-editor-md>
+  <!-- <d-editor-md
+    v-model="content"
+    :md-plugins="plugins"
+  >
+  </d-editor-md> -->
+</template>
+
+<script>
+import { defineComponent, reactive, ref } from 'vue';
+// import PlantUml from 'markdown-it-plantuml';  // 请首先安装 markdown-it-plantuml 依赖
+
+export default defineComponent({
+  setup() {
+    const content = ref(`// DEMO无法进行import，使用时请放开代码中注释
+@startuml
+Alice -> "Bob()" : Hello
+"Bob()" -> "This is very long" as Long
+' You can also declare:
+' "Bob()" -> Long as "This is very long"
+Long --> "Bob()" : ok
+@enduml`);
+
+    mdPlugins = [{
+      // plugin: PlantUml,
+      // opts: {server: 'https://www/plantuml.com/plantuml'} // 自定义server可参考plantuml官方文档进行搭建
+    }];
+
+    return { content, mdPlugins };
+  },
+});
+</script>
+```
+
+:::
+
 ### 配置快速提示
 
 :::demo 设置 hintConfig 后，可用于支持@选择用户等场景。

packages/devui-vue/package.json

@@ -48,6 +48,7 @@
     "@babel/helper-hoist-variables": "^7.22.5",
     "@devui-design/icons": "^1.3.0",
     "@floating-ui/dom": "^0.4.4",
+    "@iktakahiro/markdown-it-katex": "^4.0.1",
     "@types/codemirror": "0.0.97",
     "@types/lodash-es": "^4.17.4",
     "@vue/shared": "^3.2.33",
@@ -65,6 +66,7 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.20",
     "markdown-it": "12.2.0",
+    "markdown-it-plantuml": "^1.4.1",
     "mermaid": "9.1.1",
     "mitt": "^3.0.0",
     "monaco-editor": "0.34.0",