diff --git a/components/prose/ProsePre.global.vue b/components/prose/ProsePre.global.vue
index 37ad211ccacb573b5e1bf6bd75f36b3d3db7101b..ac05f86c0b82852a7d95f8e9ddbe04bd271c34b7 100644
--- a/components/prose/ProsePre.global.vue
+++ b/components/prose/ProsePre.global.vue
@@ -9,7 +9,7 @@
         />
     </pre>
     <UDivider :ui="{ border: { base: 'border-gray-700' } }" />
-    <pre :class="$props.class" class="m-0 rounded-tl-none rounded-tr-none"><code ref="codeBlock">{{ code }}</code></pre>
+    <pre :class="$props.class" class="m-0 rounded-tl-none rounded-tr-none"><code v-html="codeBlock"></code></pre>
 </template>
 
 <script setup>
@@ -55,9 +55,9 @@ const handleCopy = () => {
 }
 const codeBlock = ref(null)
 const handleRender = () => {
-    if (codeBlock.value) {
-        codeBlock.value.textContent = props.code
-        hljs.highlightElement(codeBlock.value)
+    if (props.language) {
+        const lang = props.language === 'vue' ? 'html' : props.language
+        codeBlock.value = hljs.highlight(lang, props.code, true).value
     }
 }
 watch(()=> props.code, () => {