初始化

client/src/components/CodeBlock.vue

@@ -0,0 +1,33 @@
+<template>
+  <code ref="codeBlock" :class="languageClass">{{ code }}</code>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, nextTick } from 'vue'
+import hljs from 'highlight.js'
+
+const props = defineProps<{
+  code: string
+  language: string
+}>()
+
+const codeBlock = ref<HTMLElement | null>(null)
+
+const languageClass = `language-${props.language || 'plaintext'}`
+
+const highlight = () => {
+  if (codeBlock.value) {
+    // Reset internal state if needed, though highlighting overwrites innerHTML
+    delete codeBlock.value.dataset.highlighted
+    hljs.highlightElement(codeBlock.value)
+  }
+}
+
+onMounted(() => {
+  highlight()
+})
+
+watch(() => props.code, () => {
+  nextTick(highlight)
+})
+</script>