feat: syntax highlighting (#10)

* feat: template highlighting

* feat: syntax highlighting

README.md

@@ -86,6 +86,10 @@ See [launch-editor](https://github.com/yyx990803/launch-editor/#supported-editor
 
 Note: this does not currently work in the playground, due to `nuxt dev playground` overriding the `rootDir`.
 
+## Syntax Highlighting
+
+Syntax highlighting is provided by [Nuxt Shiki](https://github.com/nuxt-modules/shiki), and can be configured via the `shiki` key in your `nuxt.config.ts`.
+
 <!-- ## Quick Setup
 
 Install the module to your Nuxt application with one command:

package.json

@@ -33,6 +33,7 @@
     "@nuxt/kit": "^3.15.0",
     "@vue/compiler-sfc": "^3.3.0",
     "defu": "^6.1.4",
+    "nuxt-shiki": "^0.3.0",
     "pathe": "^2.0.0",
     "tailwind-variants": "^0.3.0"
   },

playground/nuxt.config.ts

@@ -10,4 +10,8 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2025-01-03',
+
+  shiki: {
+    defaultTheme: 'nord',
+  },
 })

src/module.ts

@@ -7,6 +7,7 @@ import {
   updateTemplates,
   useLogger,
   addTypeTemplate,
+  installModule,
 } from '@nuxt/kit'
 import { resolve } from 'pathe'
 import { parse } from '@vue/compiler-sfc'
@@ -102,6 +103,13 @@ export {}
 `,
     })
 
+    await installModule('nuxt-shiki', {
+      bundledLangs: ['vue'],
+    })
+    // https://github.com/pi0/nuxt-shiki/issues/41
+    nuxt.options.nitro.experimental = nuxt.options.nitro.experimental || {}
+    nuxt.options.nitro.experimental.wasm = true
+
     // Ensure types are included in tsconfig
     nuxt.hook('prepare:types', ({ references }) => {
       references.push({ path: resolve(nuxt.options.buildDir, 'types/bedtime.d.ts') })

src/runtime/components/OpenInEditorButton.vue

@@ -1,6 +1,7 @@
 <template>
   <button
     class="open-in-editor-button"
+    title="Open in editor"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"

src/runtime/components/TemplateView.vue

@@ -2,30 +2,27 @@
   <div
     v-if="content"
     class="template-view"
-  >
-    <pre><code>{{ content }}</code></pre>
-  </div>
+    v-html="html"
+  />
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { getShikiHighlighter } from '#imports'
+
+const props = defineProps<{
   content?: string | null
 }>()
+
+const highlighter = await getShikiHighlighter()
+const html = highlighter.highlight(props.content, { lang: 'vue' })
 </script>
 
 <style scoped>
-.template-view {
-  background-color: var(--template-view-background-color);
+:deep(.shiki) {
   border: var(--template-view-border);
   border-radius: var(--template-view-border-radius);
+  font-size: var(--template-view-font-size);
   margin: var(--template-view-margin);
   padding: var(--template-view-padding);
 }
-
-.template-view pre {
-  font-size: var(--template-view-font-size);
-  margin: 0;
-  overflow-x: scroll;
-  white-space: pre;
-}
 </style>

src/runtime/variables.css

@@ -41,8 +41,7 @@
   --variant-title-text-color: #374151;
 
   /* Template View */
-  --template-view-background-color: #f8f8f8;
-  --template-view-border: 1px solid #e5e5e5;
+  --template-view-border: 0;
   --template-view-border-radius: 0.375rem;
   --template-view-margin: 1rem 0 0 0;
   --template-view-padding: 1rem;