diff --git a/packages/histoire/package.json b/packages/histoire/package.json
index 18240e72..19b81f51 100644
--- a/packages/histoire/package.json
+++ b/packages/histoire/package.json
@@ -43,6 +43,7 @@
     "pathe": "^0.2.0",
     "pinia": "^2.0.10",
     "sade": "^1.8.1",
+    "shiki": "^0.10.0",
     "vite": "^2.7.13",
     "vue": "^3.2.27",
     "vue-router": "^4.0.0"
diff --git a/packages/histoire/src/client/app/codegen/vue3.ts b/packages/histoire/src/client/app/codegen/vue3.ts
index 740926f6..1b77a8f1 100644
--- a/packages/histoire/src/client/app/codegen/vue3.ts
+++ b/packages/histoire/src/client/app/codegen/vue3.ts
@@ -15,7 +15,7 @@ export async function generateSourceCode (vnode: VNode | VNode[]) {
   return lines.join('\n')
 }
 
-async function printVNode (vnode: VNode) {
+async function printVNode (vnode: VNode): Promise<string[]> {
   if (vnode.type === Text) {
     return [vnode.children.trim()]
   }
diff --git a/packages/histoire/src/client/app/components/StorySourceCode.vue b/packages/histoire/src/client/app/components/StorySourceCode.vue
index 38a9faf8..c50abff5 100644
--- a/packages/histoire/src/client/app/components/StorySourceCode.vue
+++ b/packages/histoire/src/client/app/components/StorySourceCode.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { PropType, ref, watchEffect } from 'vue'
+import { computed, onMounted, PropType, ref, shallowRef, watchEffect } from 'vue'
+import { getHighlighter, Highlighter, setCDN } from 'shiki'
 import { generateSourceCode } from '../codegen/vue3'
 import { Variant } from '../types'
+import { isDark } from '../util/dark'
 
 const props = defineProps({
   variant: {
@@ -11,18 +13,59 @@ const props = defineProps({
 })
 
 const sourceCode = ref('')
+const highlighter = shallowRef<Highlighter>()
+
+onMounted(async () => {
+  setCDN('https://unpkg.com/shiki/')
+  highlighter.value = await getHighlighter({
+    langs: [
+      'html',
+      'jsx',
+    ],
+    themes: [
+      'github-light',
+      'github-dark',
+    ],
+  })
+})
 
 watchEffect(async () => {
   sourceCode.value = await generateSourceCode(props.variant.slots().default({ state: props.variant.state }))
 })
+
+const sourceHtml = computed(() => highlighter.value?.codeToHtml(sourceCode.value, {
+  lang: 'html',
+  theme: isDark.value ? 'github-dark' : 'github-light',
+}))
 </script>
 
 <template>
-  <div>
-    <textarea
-      class="htw-w-full htw-h-full htw-p-2 htw-outline-none"
-      :value="sourceCode"
-      readonly
-    />
+  <div class="htw-p-2 htw-h-full">
+    <div class="htw-bg-zinc-50 dark:htw-bg-zinc-750 htw-border htw-border-zinc-100 dark:htw-border-zinc-800 htw-rounded htw-h-full">
+      <textarea
+        v-if="!sourceHtml"
+        class="__histoire-code-placeholder htw-w-full htw-h-full htw-p-2 htw-outline-none htw-bg-transparent"
+        :value="sourceCode"
+        readonly
+      />
+      <!-- eslint-disable vue/no-v-html -->
+      <div
+        v-else
+        class="__histoire-code htw-w-full htw-h-full htw-p-2 htw-overflow-auto"
+        v-html="sourceHtml"
+      />
+      <!-- eslint-enable vue/no-v-html -->
+    </div>
   </div>
 </template>
+
+<style scoped>
+.__histoire-code-placeholder {
+  color: inherit;
+  font-size: inherit;
+}
+
+.__histoire-code:deep(.shiki) {
+  background: transparent !important;
+}
+</style>
diff --git a/packages/histoire/src/client/app/components/app/AppHeader.vue b/packages/histoire/src/client/app/components/app/AppHeader.vue
index 2e8754dd..f38b6173 100644
--- a/packages/histoire/src/client/app/components/app/AppHeader.vue
+++ b/packages/histoire/src/client/app/components/app/AppHeader.vue
@@ -2,9 +2,7 @@
 import { useDark, useToggle } from '@vueuse/core'
 import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
-
-const isDark = useDark({ valueDark: 'htw-dark' })
-const toggleDark = useToggle(isDark)
+import { isDark, toggleDark } from '../../util/dark'
 
 const carbonIcon = computed(() => {
   return isDark.value ? 'carbon:moon' : 'carbon:sun'
diff --git a/packages/histoire/src/client/app/style/main.css b/packages/histoire/src/client/app/style/main.css
index 0076f4fe..c31d65c6 100644
--- a/packages/histoire/src/client/app/style/main.css
+++ b/packages/histoire/src/client/app/style/main.css
@@ -25,7 +25,8 @@ button {
 @tailwind components;
 @tailwind utilities;
 
-body {
+body,
+pre {
   margin: 0;
 }
 
diff --git a/packages/histoire/src/client/app/util/dark.ts b/packages/histoire/src/client/app/util/dark.ts
new file mode 100644
index 00000000..467866a1
--- /dev/null
+++ b/packages/histoire/src/client/app/util/dark.ts
@@ -0,0 +1,4 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark({ valueDark: 'htw-dark' })
+export const toggleDark = useToggle(isDark)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a9c2b965..10d0a02d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,6 +65,7 @@ importers:
       postcss: ^8.2.4
       postcss-import: ^14.0.2
       sade: ^1.8.1
+      shiki: ^0.10.0
       tailwindcss: ^3.0.18
       typescript: ^4.1.3
       vite: ^2.7.13
@@ -80,6 +81,7 @@ importers:
       pathe: 0.2.0
       pinia: 2.0.10_typescript@4.5.5+vue@3.2.29
       sade: 1.8.1
+      shiki: 0.10.0
       vite: 2.7.13
       vue: 3.2.29
       vue-router: 4.0.12_vue@3.2.29
@@ -2289,6 +2291,10 @@ packages:
       minimist: 1.2.5
     dev: true
 
+  /jsonc-parser/3.0.0:
+    resolution: {integrity: sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==}
+    dev: false
+
   /jsonfile/6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:
@@ -2986,6 +2992,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /shiki/0.10.0:
+    resolution: {integrity: sha512-iczxaIYeBFHTFrQPb9DVy2SKgYxC4Wo7Iucm7C17cCh2Ge/refnvHscUOxM85u57MfLoNOtjoEFUWt9gBexblA==}
+    dependencies:
+      jsonc-parser: 3.0.0
+      vscode-oniguruma: 1.6.1
+      vscode-textmate: 5.2.0
+    dev: false
+
   /side-channel/1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
     dependencies:
@@ -3384,6 +3398,14 @@ packages:
       - stylus
     dev: true
 
+  /vscode-oniguruma/1.6.1:
+    resolution: {integrity: sha512-vc4WhSIaVpgJ0jJIejjYxPvURJavX6QG41vu0mGhqywMkQqulezEqEQ3cO3gc8GvcOpX6ycmKGqRoROEMBNXTQ==}
+    dev: false
+
+  /vscode-textmate/5.2.0:
+    resolution: {integrity: sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==}
+    dev: false
+
   /vue-demi/0.12.1_vue@3.2.29:
     resolution: {integrity: sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==}
     engines: {node: '>=12'}