Update ProsePre.global.vue

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>