fix(message): dark mode syntax highlighting in code blocks (#45)

* fix(message): dark mode syntax highlighting in code blocks

* chore: remove code block mode prop and upgrade streamdown-vue

Author: cwandev

apps/www/content/3.components/1.chatbot/message.md

@@ -421,6 +421,10 @@ const md = computed(() => (slotContent.value ?? props.content ?? '') as string)
 
 <template>
   <StreamMarkdown
+    :shiki-theme="{
+      light: 'github-light',
+      dark: 'github-dark',
+    }"
     :content="md"
     :class="
       cn(

packages/elements/package.json

@@ -20,7 +20,7 @@
     "lucide-vue-next": "^0.544.0",
     "motion-v": "^1.7.3",
     "shiki": "^3.14.0",
-    "streamdown-vue": "^1.0.21",
+    "streamdown-vue": "^1.0.29",
     "tokenlens": "^1.3.1",
     "vue": "^3.5.22",
     "vue-stick-to-bottom": "^0.1.0"

packages/elements/src/message/MessageResponse.vue

@@ -26,6 +26,10 @@ const md = computed(() => (slotContent.value ?? props.content ?? '') as string)
 
 <template>
   <StreamMarkdown
+    :shiki-theme="{
+      light: 'github-light',
+      dark: 'github-dark',
+    }"
     :content="md"
     :class="
       cn(

packages/examples/package.json

@@ -4,8 +4,7 @@
   "private": true,
   "description": "Examples for the repo.",
   "exports": {
-    ".": "./src/index.ts",
-    "./*": "./src/*.ts"
+    ".": "./src/index.ts"
   },
   "dependencies": {
     "@repo/elements": "workspace:*",

packages/examples/src/message.vue

@@ -96,7 +96,7 @@ Creates reactive primitive values:
 import { ref } from 'vue'
 
 const count = ref(0)
-<//script>
+<\/script>
 
 <template>
   <button @click="count++">Count: {{ count }}</button>
@@ -115,19 +115,19 @@ const count = ref(0)
 watch(count, (newVal, oldVal) => {
   console.log(\`Count changed from \${oldVal} to \${newVal}\`)
 })
-<//script>
+<\/script>
 \`\`\`
 
 ## When to Use the Composition API
 
-- ✅ **For complex logic** — Easier to organize and reuse reactive state  
-- ✅ **For reusable code** — Create your own composables (like custom hooks)  
-- ✅ **For TypeScript support** — More type-friendly than Options API  
+- ✅ **For complex logic** — Easier to organize and reuse reactive state
+- ✅ **For reusable code** — Create your own composables (like custom hooks)
+- ✅ **For TypeScript support** — More type-friendly than Options API
 - ❌ **For simple components** — The Options API might be enough
 
 ## Rules of the Composition API
 
-1. Only use Vue composables **inside \`setup()\`** or other composables  
+1. Only use Vue composables **inside \`setup()\`** or other composables
 2. Always return what you want to use in your template from \`setup()\`
 
 Would you like to explore more advanced composables like \`computed\` or \`onMounted\`?`,
@@ -138,11 +138,11 @@ Would you like to explore more advanced composables like \`computed\` or \`onMou
 
 Here are the most common composables:
 
-- **ref()** — creates reactive primitive values  
-- **reactive()** — makes entire objects reactive  
-- **computed()** — creates derived reactive values  
-- **watch()** — runs side effects on data changes  
-- **onMounted()** — lifecycle hook for when a component is mounted  
+- **ref()** — creates reactive primitive values
+- **reactive()** — makes entire objects reactive
+- **computed()** — creates derived reactive values
+- **watch()** — runs side effects on data changes
+- **onMounted()** — lifecycle hook for when a component is mounted
 
 Here's a simple example:
 
@@ -155,7 +155,7 @@ const count = ref(0)
 onMounted(() => {
   console.log('Component mounted!')
 })
-<//script>
+<\/script>
 
 <template>
   <button @click="count++">Clicked {{ count }} times</button>
@@ -170,9 +170,9 @@ Which specific composable would you like to learn more about?`,
 
 ## Key Benefits
 
-1. **Cleaner code organization** — Group related logic by feature  
-2. **Reusable logic** — Build and share your own composables  
-3. **Better TypeScript support** — Stronger typing than the Options API  
+1. **Cleaner code organization** — Group related logic by feature
+2. **Reusable logic** — Build and share your own composables
+3. **Better TypeScript support** — Stronger typing than the Options API
 
 ## Most Popular Composables