将代码块高亮

src/main.ts

@@ -1,6 +1,7 @@
 import '@/assets/css/main.css'
 import "@/assets/css/common.less"
 import 'animate.css';
+
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
@@ -10,6 +11,7 @@ import App from './App.vue'
 import router from '@/router/index.ts'
 import http from "@/utils/http.js"
 
+
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)

src/utils/highlight.js

@@ -0,0 +1,13 @@
+import hljs from 'highlight.js/lib/core'
+import 'highlight.js/styles/github.css';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
+
+export function highlightHtml(htmlStr, language) {
+  return hljs.highlight(htmlStr, {
+    language:
+      language
+  }).value
+}

src/views/KMPlatform/OpenPlatform/OpenPlatform.vue

@@ -1,28 +1,25 @@
 <template>
-    <el-container class="main-container">
+  <el-container class="main-container">
     <el-container>
       <el-aside class="main-aside">
-           <!-- 开放平台 -->
-    <el-menu
-      default-active="1-1"
-      :unique-opened="true"
-      class="el-menu-open-platform">
-        <el-sub-menu index="1">
-        <template #title>
-          <i class="el-icon-location"></i>
-          <span>API文档</span>
-        </template>
-        <el-menu-item-group>
-          <!-- <el-menu-item index="1-1"  >简介</el-menu-item> -->
-          <el-menu-item index="1-1"  @click="handlePath('0')">API概览</el-menu-item>
-        </el-menu-item-group>
-        <el-sub-menu index="1-3">
-            <template #title>相关接口</template>
-            <el-menu-item index="1-3-1" @click="handlePath('1')">实体查询</el-menu-item>
-            <el-menu-item index="1-3-2" @click="handlePath('2')">实体关系查询</el-menu-item>
+        <!-- 开放平台 -->
+        <el-menu default-active="1-1" :unique-opened="true" class="el-menu-open-platform">
+          <el-sub-menu index="1">
+            <template #title>
+              <i class="el-icon-location"></i>
+              <span>API文档</span>
+            </template>
+            <el-menu-item-group>
+              <!-- <el-menu-item index="1-1"  >简介</el-menu-item> -->
+              <el-menu-item index="1-1" @click="handlePath('0')">API概览</el-menu-item>
+            </el-menu-item-group>
+            <el-sub-menu index="1-3">
+              <template #title>相关接口</template>
+              <el-menu-item index="1-3-1" @click="handlePath('1')">实体查询</el-menu-item>
+              <el-menu-item index="1-3-2" @click="handlePath('2')">实体关系查询</el-menu-item>
+            </el-sub-menu>
           </el-sub-menu>
-      </el-sub-menu>
-    </el-menu>
+        </el-menu>
       </el-aside>
       <el-main class="content-area">
         <!-- 主要内容区域 -->
@@ -39,7 +36,7 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
 const handlePath = (id) => {
-    router.push({ name: 'platformText', params: { id: id } });
+  router.push({ name: 'platformText', params: { id: id } });
 };
 
 </script>

src/views/KMPlatform/OpenPlatform/platformText.vue

@@ -44,10 +44,11 @@
              
             </div>
           </el-alert> -->
-           <!-- <el-icon class="copy-icon" @click="copyCode">
+          <!-- <el-icon class="copy-icon" @click="copyCode">
                 <DocumentCopy />
               </el-icon> -->
-         <pre><code ref="codeElement" >{{ postExample }}</code></pre>
+          <!-- <pre><code ref="codeElement">{{ postExample }}</code></pre> -->
+          <pre><code ref="codeElement" v-html="highlightHtml(postExample, 'json')"></code></pre>
         </el-collapse-item>
       </el-collapse>
     </el-card>
@@ -74,8 +75,8 @@
       </el-table>
 
       <h3>请求示例</h3>
-      <pre><code>{{ requestExample }}</code></pre>
-
+      <!-- <pre><code>{{ requestExample }}</code></pre> -->
+      <pre><code v-html="highlightHtml(requestExample, 'json')"></code></pre>
       <h3>响应结果 (Response - JSON)</h3>
       <el-table :data="responseParams" border style="width: 100%">
         <el-table-column prop="fieldName" label="字段名" />
@@ -98,7 +99,8 @@
       </el-table>
 
       <h3>响应示例</h3>
-      <pre><code>{{ responseExample }}</code></pre>
+      <!-- <pre><code>{{ responseExample }}</code></pre> -->
+      <pre><code v-html="highlightHtml(responseExample, 'json')"></code></pre>
     </el-card>
   </div>
   <div v-if="queueId === '2'">
@@ -154,7 +156,8 @@
       </el-table> -->
 
       <h3>响应示例</h3>
-      <pre><code>{{ responseExampleRelationship }}</code></pre>
+      <!-- <pre><code>{{ responseExampleRelationship }}</code></pre> -->
+      <pre><code v-html="highlightHtml(responseExampleRelationship, 'json')"></code></pre>
     </el-card>
   </div>
 </template>
@@ -163,6 +166,7 @@ import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { DocumentCopy } from '@element-plus/icons-vue';
+import { highlightHtml } from "@/utils/highlight"
 
 const route = useRoute();
 let queueId = ref(route.params.id || '0'); // 默认值为 '0'，表示简介
@@ -170,6 +174,8 @@ watch(() => route.params.id, (newId) => {
   queueId.value = newId || '0';
 });
 
+
+
 const headers = ref([
   {
     paramName: 'Content-Type',
@@ -243,7 +249,7 @@ const responseParams = ref([
   { fieldName: 'errorMsg', name: '错误信息', type: 'string', description: '请求失败时返回的错误描述信息。成功时为 null。' },
   { fieldName: 'requestId', name: '请求唯一ID', type: 'string', description: '对应请求头中的 request-id，用于追踪请求。' },
   { fieldName: 'data', name: '响应数据', type: 'Array<Object>', description: '成功时返回的数据对象数组。主要包含实体节点列表 (nodes)。' },
-  { fieldName: 'data.key', name: '响应数据', type:'string', description: '第一层级key为nodes，即节点列表属性' },
+  { fieldName: 'data.key', name: '响应数据', type: 'string', description: '第一层级key为nodes，即节点列表属性' },
   { fieldName: 'data.value', name: '响应数据', type: 'Array<Object>', description: '第一层级value为nodes的值，即节点列表属性的值' }
 ]);
 
@@ -394,6 +400,7 @@ const responseExampleRelationship = ref(`{
   font-size: 22px;
   font-weight: bold;
 }
+
 h3 {
   margin-top: 20px;
   margin-bottom: 10px;
@@ -411,9 +418,11 @@ pre {
 code {
   font-family: 'Courier New', Courier, monospace;
 }
+
 .code-container {
   position: relative;
 }
+
 .copy-icon {
   position: absolute;
   top: 10px;
@@ -423,33 +432,41 @@ code {
   font-size: 18px;
   color: #606266;
 }
+
 .copy-icon:hover {
   color: #409eff;
 }
+
 .code-container pre code {
   display: block;
 }
 
 .code-container pre code span.request-header {
-  color: #1890ff; /* 请求头颜色 */
+  color: #1890ff;
+  /* 请求头颜色 */
 }
 
 .code-container pre code span.request-body {
-  color: #333; /* 请求内容颜色 */
+  color: #333;
+  /* 请求内容颜色 */
 }
+
 .el-button {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 1;
 }
+
 .mx-10 {
-    margin:10px 0
+  margin: 10px 0
 }
+
 .mx-20 {
-    margin:20px 0
+  margin: 20px 0
 }
+
 .text-bold {
-    font-weight: bold;
+  font-weight: bold;
 }
 </style>