fix(devtools): add robots.txt code highlighting

Author: harlan-zw

Diff for: client/app.vue

@@ -3,11 +3,11 @@ import {
   appFetch,
   colorMode,
   computed,
-  highlight,
   useAsyncData,
   useHead,
 } from '#imports'
 import { useLocalStorage } from '@vueuse/core'
+import { loadShiki } from '~/composables/shiki'
 import {
   envTab,
   path,
@@ -18,6 +18,7 @@ import 'floating-vue/dist/style.css'
 useHead({
   title: 'Nuxt Robots',
 })
+await loadShiki()
 
 const globalDebugFetch = useAsyncData<{ indexable: boolean, hints: string[], runtimeConfig: { version: string } }>(() => {
   if (!appFetch.value || typeof appFetch.value !== 'function') {
@@ -65,6 +66,10 @@ const version = computed(() => {
   return globalDebugData.value?.runtimeConfig?.version || ''
 })
 
+const metaTag = computed(() => {
+  return `<meta name="robots" content="${pathDebugData.value?.rule}">`
+})
+
 const tab = useLocalStorage('nuxt-robots:tab', 'overview')
 </script>
 
@@ -221,7 +226,7 @@ const tab = useLocalStorage('nuxt-robots:tab', 'overview')
                     Robots are blocked from crawling <code class="opacity-60 text-sm">{{ path }}</code>.
                   </div>
                 </div>
-                <pre of-auto h-full text-sm style="white-space: break-spaces;" v-html="highlight(JSON.stringify(pathDebugData.rule || {}, null, 2), 'json')" />
+                <OCodeBlock :code="metaTag" lang="html" />
                 <div v-if="pathDebugData?.debug" class="mt-3 flex gap-2">
                   <div v-if="pathDebugData?.debug?.source" class="text-xs text-gray-300 mt-3 border-gray-600 rounded-xl border-1 px-2 py-1 inline-flex">
                     Source: {{ pathDebugData?.debug?.source }}
@@ -264,11 +269,11 @@ const tab = useLocalStorage('nuxt-robots:tab', 'overview')
           <OSectionBlock>
             <template #text>
               <h3 class="opacity-80 text-base mb-1">
-                robots.txt
+                /robots.txt
               </h3>
             </template>
             <div class="px-3 py-2 space-y-5">
-              <pre of-auto h-full text-sm style="white-space: break-spaces;" v-html="globalDebugData.robotsTxt" />
+              <OCodeBlock :code="globalDebugData.robotsTxt" lang="robots-txt" />
             </div>
           </OSectionBlock>
         </div>
@@ -281,7 +286,7 @@ const tab = useLocalStorage('nuxt-robots:tab', 'overview')
               </h3>
             </template>
             <div class="px-3 py-2 space-y-5">
-              <pre of-auto h-full text-sm style="white-space: break-spaces;" v-html="highlight(JSON.stringify(globalDebugData?.runtimeConfig || {}, null, 2), 'json')" />
+              <OCodeBlock :code="JSON.stringify(globalDebugData?.runtimeConfig || {}, null, 2)" lang="json" />
             </div>
           </OSectionBlock>
         </div>
@@ -360,14 +365,6 @@ html.dark {
   --uno: border-solid border-1 border-b border-base h-1px w-full block my-2 op50;
 }
 
-.dark .shiki {
-  background: var(--shiki-dark-bg, inherit) !important;
-}
-
-.dark .shiki span {
-  color: var(--shiki-dark, inherit) !important;
-}
-
 /* JSON Editor */
 textarea {
   background: #8881

Diff for: client/components/OCodeBlock.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { BundledLanguage } from 'shiki'
+import { computed } from 'vue'
+import { renderCodeHighlight } from '../composables/shiki'
+
+const props = withDefaults(
+  defineProps<{
+    code: string
+    lang?: BundledLanguage | 'robots-txt'
+    lines?: boolean
+    transformRendered?: (code: string) => string
+  }>(),
+  {
+    lines: false,
+  },
+)
+const rendered = computed(() => {
+  const code = renderCodeHighlight(props.code, props.lang)
+  return props.transformRendered ? props.transformRendered(code.value || '') : code.value
+})
+</script>
+
+<template>
+  <pre
+    class="n-code-block p-5"
+    :class="lines ? 'n-code-block-lines' : ''"
+    v-html="rendered"
+  />
+</template>
+
+<style>
+.n-code-block-lines .shiki code .line::before {
+  display: none;
+}
+</style>

Diff for: client/composables/shiki.ts

@@ -1,28 +1,84 @@
-import type { BundledLanguage, Highlighter } from 'shiki'
-import { useColorMode } from '#imports'
-import { getHighlighter } from 'shiki'
-import { ref } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
+import type { Highlighter, BundledLanguage } from 'shiki'
+import { createHighlighter } from 'shiki'
+import { computed, ref, toValue } from 'vue'
+import { devtools } from './rpc'
 
 export const shiki = ref<Highlighter>()
-const mode = useColorMode()
 
-// TODO: Only loading when needed
-getHighlighter({
-  themes: [
-    'vitesse-dark',
-    'vitesse-light',
-  ],
-  langs: [
-    'html',
-    'json',
-  ],
-}).then((i) => { shiki.value = i })
+export async function loadShiki() {
+  // Only loading when needed
+  shiki.value = await createHighlighter({
+    themes: [
+      'vitesse-dark',
+      'vitesse-light',
+    ],
+    langs: [
+      'html',
+      'json',
+      Object.freeze({
+        displayName: 'robots.txt',
+        name: 'robots-txt',
+        patterns: [
+          { include: '#main' },
+        ],
+        repository: {
+          $base: { patterns: [] },
+          $self: { name: 'source.robots-txt' },
+          main: {
+            patterns: [
+              { include: '#comment' },
+              { include: '#directive' },
+              { include: '#wildcard' },
+              { include: '#uri' },
+              { include: '#text' },
+              { include: '#number' },
+            ],
+          },
+          comment: {
+            name: 'comment.line.hash.robots-txt',
+            begin: '#',
+            end: '$',
+            beginCaptures: {
+              0: { name: 'punctuation.definition.comment.robots-txt' },
+            },
+          },
+          directive: {
+            name: 'keyword.control.directive.robots-txt',
+            begin: '^[A-Z][a-z-]*',
+            end: '\\s*:',
+          },
+          wildcard: {
+            name: 'constant.character.wildcard.robots-txt',
+            match: '\\*',
+          },
+          uri: {
+            name: 'string.unquoted.uri.robots-txt',
+            begin: '(?:[a-z]+:)\\/',
+            end: '$',
+          },
+          text: {
+            name: 'string.unquoted.text.robots-txt',
+            match: '[A-Za-z-]+',
+          },
+          number: {
+            name: 'constant.numeric.integer.robots-txt',
+            match: '\\d',
+          },
+        },
+        scopeName: 'text.robots-txt',
+      }),
+    ],
+  })
+  return shiki.value
+}
 
-export function highlight(code: string, lang: BundledLanguage) {
-  if (!shiki.value)
-    return code
-  return shiki.value.codeToHtml(code, {
-    lang,
-    theme: mode.value === 'dark' ? 'vitesse-dark' : 'vitesse-light',
+export function renderCodeHighlight(code: MaybeRef<string>, lang?: BundledLanguage | 'robots-txt') {
+  return computed(() => {
+    const colorMode = devtools.value?.colorMode || 'light'
+    return shiki.value!.codeToHtml(toValue(code), {
+      lang,
+      theme: colorMode === 'dark' ? 'vitesse-dark' : 'vitesse-light',
+    }) || ''
   })
 }