From 87eb5700ea82a2c319fabc5be2480363eb9a89aa Mon Sep 17 00:00:00 2001
From: aolinpk <2755561608@qq.com>
Date: Wed, 29 May 2024 17:40:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E4=B8=AD=E5=A2=9E=E5=8A=A0=E6=96=B0=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?previewStyleClass=E7=94=A8=E4=BA=8E=E5=AE=9E=E7=8E=B0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E9=AB=98=E4=BA=AE=E4=BB=A3=E7=A0=81=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E3=80=82#1861?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-md/src/components/md-render.tsx    |  5 +--
 .../src/composables/use-editor-md-render.ts   |  4 +-
 .../devui/editor-md/src/editor-md-types.ts    |  4 ++
 .../docs/components/editor-md/index.md        | 44 +++++++++++++++++++
 4 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/packages/devui-vue/devui/editor-md/src/components/md-render.tsx b/packages/devui-vue/devui/editor-md/src/components/md-render.tsx
index c54ace9709..ff09038a98 100644
--- a/packages/devui-vue/devui/editor-md/src/components/md-render.tsx
+++ b/packages/devui-vue/devui/editor-md/src/components/md-render.tsx
@@ -8,11 +8,10 @@ export default defineComponent({
   props: mdRenderProps,
   emits: ['mdRenderChange', 'checkedChange'],
   setup(props: MdRenderProps, ctx: SetupContext) {
-    const { previewRef, renderService, onPreviewClick, setContainerContent } = useEditorMdRender(props, ctx);
+    const { previewRef, renderService, previewStyleClass, onPreviewClick, setContainerContent } = useEditorMdRender(props, ctx);
     useMdRenderWatcher(props, renderService, setContainerContent);
-
     return () => (
-      <div ref={previewRef} class="dp-editor-md-preview-container dp-md-view" onClick={onPreviewClick}>
+      <div ref={previewRef} class={`dp-editor-md-preview-container ${previewStyleClass.value}`} onClick={onPreviewClick}>
         {ctx.slots.default?.()}
       </div>
     );
diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-render.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-render.ts
index 23e19283d9..6129726248 100644
--- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-render.ts
+++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-render.ts
@@ -3,7 +3,7 @@ import { MdPlugin, MdRenderProps } from '../editor-md-types';
 import { MDRenderService } from './md-render-service';
 
 export function useEditorMdRender(props: MdRenderProps, ctx: SetupContext) {
-  const { content, customParse, disableRender } = toRefs(props);
+  const { content, customParse, disableRender, previewStyleClass } = toRefs(props);
   const renderService = new MDRenderService();
   const previewRef = ref();
   let timer: ReturnType<typeof setTimeout> | null = null;
@@ -58,7 +58,7 @@ export function useEditorMdRender(props: MdRenderProps, ctx: SetupContext) {
     }
   };
 
-  return { previewRef, renderService, onPreviewClick, setContainerContent };
+  return { previewRef, renderService, previewStyleClass, onPreviewClick, setContainerContent };
 }
 
 export function useMdRenderWatcher(props: MdRenderProps, renderService: MDRenderService, setContainerContent: () => void) {
diff --git a/packages/devui-vue/devui/editor-md/src/editor-md-types.ts b/packages/devui-vue/devui/editor-md/src/editor-md-types.ts
index c6b4fa3b4e..9e875071b9 100644
--- a/packages/devui-vue/devui/editor-md/src/editor-md-types.ts
+++ b/packages/devui-vue/devui/editor-md/src/editor-md-types.ts
@@ -61,6 +61,10 @@ const commonProps = {
     type: Array as PropType<Array<MdPlugin>>,
     default: () => [],
   },
+  previewStyleClass: {
+    type: String,
+    default: 'dp-md-view',
+  },
 };
 
 export interface HintConfigItem {
diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md
index 9914367269..535c3fd27e 100644
--- a/packages/devui-vue/docs/components/editor-md/index.md
+++ b/packages/devui-vue/docs/components/editor-md/index.md
@@ -120,6 +120,48 @@ export default defineComponent({
 
 :::
 
+### 自定义代码高亮
+
+`devui`的代码编辑器本身的高亮是由`highlight.js`和一些自定义颜色实现的。传入`preview-style-class`属性则可以覆盖默认类实现自定义高亮样式。
+
+:::demo 使用 highlight.js进行代码高亮或自定义类覆盖高亮样式
+
+```vue
+<template>
+  <d-md-render :preview-style-class="`custom-blank`" :content="content" :md-rules="mdRules" base-url="https://test-base-url"></d-md-render>
+  <d-md-render preview-style-class :content="content" :md-rules="mdRules" base-url="https://test-base-url"></d-md-render>
+  <d-md-render :content="content" :md-rules="mdRules" base-url="https://test-base-url"></d-md-render>
+</template>
+
+<script>
+import { defineComponent, reactive, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const content = ref('# h1 \n [link](#test)');
+    const mdRules = reactive({
+      linkify: {
+        fuzzyLink: false,
+      },
+    });
+
+    return { content, mdRules };
+  },
+});
+</script>
+<style>
+.custom-blank h1{
+  font-size: 48px;
+  font-weight: 700;
+}
+.custom-blank p > a:hover{
+  color: blue;
+}
+</style>
+```
+
+:::
+
 ### 单列渲染模式
 
 :::demo 通过 mode 控制不同的显示模式
@@ -630,6 +672,8 @@ Bob-->>John: Jolly good!
 | fullscreen-z-index     | `number`                                  | 10       | 编辑器全屏状态的 z-index                                                                                           |
 | image-upload-to-server | `boolean`                                 | false    | 是否打开图片自定义上传开关（打开后将将监听图片的复制，toolbar 图片功能上传，传出事件回调）                         |
 |editor-container-height|`number`|--|可选，编辑器内容区高度||
+|preview-style-class|`string`|--|可选，自定义代码渲染的高亮样式  [自定义代码高亮](#自定义代码高亮)||
+
 
 ### EditorMd 事件