From 916d5dc3eaccfb2a0f1d0b84221caf7be2fdf0a2 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Tue, 21 May 2024 14:17:36 +0800
Subject: [PATCH] Update ProsePre.global.vue

---
 components/prose/ProsePre.global.vue | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/prose/ProsePre.global.vue b/components/prose/ProsePre.global.vue
index 8c88674..adc46fc 100644
--- a/components/prose/ProsePre.global.vue
+++ b/components/prose/ProsePre.global.vue
@@ -10,13 +10,14 @@
             />
         </pre>
         <UDivider :ui="{ border: { base: 'border-gray-700' } }" />
-        <pre :class="$props.class" class="m-0 rounded-tl-none rounded-tr-none"><slot /></pre>
+        <pre :class="$props.class" class="m-0 rounded-tl-none rounded-tr-none"><code ref="codeBlock">{{ code }}</code></pre>
     </div>
 </template>
 
 <script setup>
+import hljs from 'highlight.js'
+import 'highlight.js/styles/github-dark.css'
 const toast = useToast()
-const slots = useSlots()
 const props = defineProps({
     code: {
         type: String,
@@ -54,14 +55,16 @@ const handleCopy = () => {
         title: '复制成功'
     })
 }
-watch(
-    () => slots.default(),
-    (newValue, oldValue) => {
-        // 在这里处理默认插槽内容的变化
-        console.log('Default slot content changed:', newValue)
-    },
-    { immediate: true, deep: true }
-)
+const codeBlock = ref(null)
+const handleRender = () => {
+    if (codeBlock.value) {
+        codeBlock.value.textContent = props.code
+        hljs.highlightElement(codeBlock.value)
+    }
+}
+onMounted(() => {
+    handleRender()
+})
 </script>
 
 <style>
-- 
GitLab