chore: switch dashboard code blocks highlight to shiki (#7497)

* fix: switch dashboard code blocks to shiki and sync theme rendering

* fix: harden and optimize dashboard shiki highlighting

Author: camera-2018

dashboard/package.json

@@ -14,7 +14,6 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "qrcode": "^1.5.4",
     "@guolao/vue-monaco-editor": "^1.5.4",
     "@tiptap/starter-kit": "2.1.7",
     "@tiptap/vue-3": "2.1.7",
@@ -25,7 +24,6 @@
     "date-fns": "2.30.0",
     "dompurify": "^3.3.2",
     "event-source-polyfill": "^1.0.31",
-    "highlight.js": "^11.11.1",
     "js-md5": "^0.8.3",
     "katex": "^0.16.27",
     "lodash": "4.17.23",
@@ -35,6 +33,7 @@
     "monaco-editor": "^0.52.2",
     "pinia": "2.1.6",
     "pinyin-pro": "^3.26.0",
+    "qrcode": "^1.5.4",
     "shiki": "^3.20.0",
     "stream-markdown": "^0.0.13",
     "vee-validate": "4.11.3",

dashboard/pnpm-lock.yaml

@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 248 icons */
+/* Auto-generated MDI subset – 247 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -236,10 +236,6 @@
   content: "\F0167";
 }
 
-.mdi-code-braces::before {
-  content: "\F0169";
-}
-
 .mdi-code-json::before {
   content: "\F0626";
 }

dashboard/src/assets/mdi-subset/materialdesignicons-subset.css

@@ -678,7 +678,7 @@ import {
 import { useRoute, useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
 import axios from "axios";
-import { MarkdownCodeBlockNode, setCustomComponents } from "markstream-vue";
+import { setCustomComponents } from "markstream-vue";
 import "markstream-vue/index.css";
 import StyledMenu from "@/components/shared/StyledMenu.vue";
 import ProviderConfigDialog from "@/components/chat/ProviderConfigDialog.vue";
@@ -696,6 +696,7 @@ import RefsSidebar from "@/components/chat/message_list_comps/RefsSidebar.vue";
 import RefNode from "@/components/chat/message_list_comps/RefNode.vue";
 import ActionRef from "@/components/chat/message_list_comps/ActionRef.vue";
 import MarkdownMessagePart from "@/components/chat/message_list_comps/MarkdownMessagePart.vue";
+import ThemeAwareMarkdownCodeBlock from "@/components/shared/ThemeAwareMarkdownCodeBlock.vue";
 import { useSessions, type Session } from "@/composables/useSessions";
 import {
   useMessages,
@@ -720,7 +721,7 @@ const props = withDefaults(defineProps<{ chatboxMode?: boolean }>(), {
 
 setCustomComponents("chat-message", {
   ref: RefNode,
-  code_block: MarkdownCodeBlockNode,
+  code_block: ThemeAwareMarkdownCodeBlock,
 });
 
 const route = useRoute();

dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff

@@ -237,7 +237,7 @@
 <script setup lang="ts">
 import { computed, nextTick, reactive, ref } from "vue";
 import axios from "axios";
-import { MarkdownCodeBlockNode, setCustomComponents } from "markstream-vue";
+import { setCustomComponents } from "markstream-vue";
 import "markstream-vue/index.css";
 import IPythonToolBlock from "@/components/chat/message_list_comps/IPythonToolBlock.vue";
 import MarkdownMessagePart from "@/components/chat/message_list_comps/MarkdownMessagePart.vue";
@@ -247,6 +247,7 @@ import RefsSidebar from "@/components/chat/message_list_comps/RefsSidebar.vue";
 import ToolCallCard from "@/components/chat/message_list_comps/ToolCallCard.vue";
 import ToolCallItem from "@/components/chat/message_list_comps/ToolCallItem.vue";
 import ActionRef from "@/components/chat/message_list_comps/ActionRef.vue";
+import ThemeAwareMarkdownCodeBlock from "@/components/shared/ThemeAwareMarkdownCodeBlock.vue";
 import type {
   ChatContent,
   ChatRecord,
@@ -270,7 +271,7 @@ const props = withDefaults(
 
 setCustomComponents("chat-message", {
   ref: RefNode,
-  code_block: MarkdownCodeBlockNode,
+  code_block: ThemeAwareMarkdownCodeBlock,
 });
 
 const { tm } = useModuleI18n("features/chat");

dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2

@@ -183,7 +183,6 @@ import { useI18n, useModuleI18n } from '@/i18n/composables';
 import { enableKatex, enableMermaid, MarkdownCodeBlockNode, setCustomComponents } from 'markstream-vue'
 import 'markstream-vue/index.css'
 import 'katex/dist/katex.min.css'
-import 'highlight.js/styles/github.css';
 import axios from 'axios';
 import { useToast } from '@/utils/toast'
 import ReasoningBlock from './message_list_comps/ReasoningBlock.vue';

dashboard/src/components/chat/Chat.vue

@@ -174,7 +174,7 @@ import {
   ref,
 } from "vue";
 import axios from "axios";
-import { MarkdownCodeBlockNode, setCustomComponents } from "markstream-vue";
+import { setCustomComponents } from "markstream-vue";
 import "markstream-vue/index.css";
 import ChatInput from "@/components/chat/ChatInput.vue";
 import IPythonToolBlock from "@/components/chat/message_list_comps/IPythonToolBlock.vue";
@@ -183,6 +183,7 @@ import ReasoningBlock from "@/components/chat/message_list_comps/ReasoningBlock.
 import RefNode from "@/components/chat/message_list_comps/RefNode.vue";
 import ToolCallCard from "@/components/chat/message_list_comps/ToolCallCard.vue";
 import ToolCallItem from "@/components/chat/message_list_comps/ToolCallItem.vue";
+import ThemeAwareMarkdownCodeBlock from "@/components/shared/ThemeAwareMarkdownCodeBlock.vue";
 import { useMediaHandling } from "@/composables/useMediaHandling";
 import {
   useMessages,
@@ -201,7 +202,7 @@ const props = withDefaults(defineProps<{ configId?: string | null }>(), {
 
 setCustomComponents("chat-message", {
   ref: RefNode,
-  code_block: MarkdownCodeBlockNode,
+  code_block: ThemeAwareMarkdownCodeBlock,
 });
 
 const { tm } = useModuleI18n("features/chat");

dashboard/src/components/chat/MessageList.vue

@@ -24,7 +24,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useModuleI18n } from '@/i18n/composables';
-import { createHighlighter } from 'shiki';
+import { ensureShikiLanguages, escapeHtml, renderShikiCode } from '@/utils/shiki';
 
 const props = defineProps({
     toolCall: {
@@ -82,13 +82,15 @@ const highlightedCode = computed(() => {
         return '';
     }
     try {
-        return shikiHighlighter.value.codeToHtml(code.value, {
-            lang: 'python',
-            theme: props.isDark ? 'min-dark' : 'github-light'
-        });
+        return renderShikiCode(
+            shikiHighlighter.value,
+            code.value,
+            'python',
+            props.isDark ? 'dark' : 'light'
+        );
     } catch (err) {
         console.error('Failed to highlight code:', err);
-        return `<pre><code>${code.value}</code></pre>`;
+        return `<pre><code>${escapeHtml(code.value)}</code></pre>`;
     }
 });
 
@@ -101,10 +103,7 @@ const displayExpanded = computed(() => {
 
 onMounted(async () => {
     try {
-        shikiHighlighter.value = await createHighlighter({
-            themes: ['min-dark', 'github-light'],
-            langs: ['python']
-        });
+        shikiHighlighter.value = await ensureShikiLanguages(['python']);
         shikiReady.value = true;
     } catch (err) {
         console.error('Failed to initialize Shiki:', err);
@@ -139,6 +138,20 @@ onMounted(async () => {
     overflow-x: auto;
 }
 
+:deep(.code-highlighted pre.shiki) {
+    margin: 0;
+    padding: 16px;
+    border-radius: 6px;
+    overflow: auto;
+}
+
+:deep(.code-highlighted pre.shiki code) {
+    display: block;
+    padding: 0;
+    background: transparent;
+    border-radius: 0;
+}
+
 .code-fallback {
     margin: 0;
     padding: 12px;