feat: syntax highlighting, close #13

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"

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()]
   }

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>

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'

packages/histoire/src/client/app/style/main.css

@@ -25,7 +25,8 @@ button {
 @tailwind components;
 @tailwind utilities;
 
-body {
+body,
+pre {
   margin: 0;
 }
 

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)