feat: 优化官方文档示例。DevCloudFE#1861

aolinpk · May 29, 2024 · 9986669 · 9986669
1 parent 87eb570
commit 9986669
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md
@@ -122,23 +122,28 @@ export default defineComponent({
 
 ### 自定义代码高亮
 
-`devui`的代码编辑器本身的高亮是由`highlight.js`和一些自定义颜色实现的。传入`preview-style-class`属性则可以覆盖默认类实现自定义高亮样式。
+`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>
+  <p>自定义类custom-blank</p>
+
   <d-md-render preview-style-class :content="content" :md-rules="mdRules" base-url="https://test-base-url"></d-md-render>
+  <p>highlight原始样式</p>
+  
   <d-md-render :content="content" :md-rules="mdRules" base-url="https://test-base-url"></d-md-render>
+  <p>DevUI样式</p>
 </template>
 
 <script>
 import { defineComponent, reactive, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const content = ref('# h1 \n [link](#test)');
+    const content = ref("# h1 \n [link](#test) \n\n Markdown 语法 `python` 代码部分\n\n```python\ndef text_to_speech(self, text, file_path):\n        print(f\"Converting text to speech: {text}\")\n        t = self.llm.chat_oai(conversations=[{\n            \"role\":\"user\",\n            \"content\": json.dumps({\n                \"input\": text,\n                \"voice\": \"echo\",\n                \"response_format\": \"wav\"\n            }, ensure_ascii=False)\n        }])\n ```");
     const mdRules = reactive({
       linkify: {
         fuzzyLink: false,
@@ -154,6 +159,12 @@ export default defineComponent({
   font-size: 48px;
   font-weight: 700;
 }
+.custom-blank .hljs-string{
+  color: red;
+}
+.custom-blank .hljs-literal{
+  color: blue;
+}
 .custom-blank p > a:hover{
   color: blue;
 }