feat: syntax highlight for globs

app/components/ConfigItem.vue

@@ -6,6 +6,7 @@ import { stringifyUnquoted } from '~/composables/strings'
 import { useRouter } from '#app/composables/router'
 import type { FiltersConfigsPage, FlatConfigItem } from '~~/shared/types'
 import { getRuleLevel, getRuleOptions } from '~~/shared/rules'
+import { Shiki } from '~/composables/shiki'
 
 const props = defineProps<{
   config: FlatConfigItem
@@ -216,7 +217,8 @@ const extraConfigs = computed(() => {
                 {{ k }}
               </div>
               <Shiki
-                lang="ts" :code="stringifyUnquoted(v)"
+                lang="ts"
+                :code="stringifyUnquoted(v)"
                 max-h-100 max-w-full w-full of-scroll rounded bg-code p2 text-sm
               />
             </div>

app/components/GlobItem.vue

@@ -2,6 +2,7 @@
 import { computed, defineComponent } from 'vue'
 import type { Linter } from 'eslint'
 import { Dropdown as VDropdown } from 'floating-vue'
+import { useHighlightedGlob } from '../composables/shiki'
 import { filtersConfigs } from '~/composables/state'
 import { useRouter } from '#app/composables/router'
 import { payload } from '~/composables/payload'
@@ -15,6 +16,8 @@ const props = withDefaults(
   { active: null },
 )
 
+const highlighted = useHighlightedGlob(() => props.glob.toString())
+
 const showsPopup = computed(() => (props.popup === 'files' && payload.value.filesResolved) || props.popup === 'configs')
 const files = computed(() => props.popup === 'files'
   ? payload.value.filesResolved?.globToFiles.get(props.glob)
@@ -41,7 +44,7 @@ const Noop = defineComponent({ setup: (_, { slots }) => () => slots.default?.()
       font-mono text-gray
       :class="active === true ? 'badge-active' : active === false ? 'badge op50' : 'badge'"
     >
-      {{ glob }}
+      <span v-html="highlighted" />
     </component>
     <template #popper="{ shown, hide }">
       <div v-if="shown && popup === 'files'" max-h="30vh" min-w-80 p3 of-auto>

app/components/RuleStateItem.vue

@@ -5,6 +5,7 @@ import { filtersConfigs } from '~/composables/state'
 import { payload } from '~/composables/payload'
 import { useRouter } from '#app/composables/router'
 import type { RuleConfigState } from '~~/shared/types'
+import { Shiki } from '~/composables/shiki'
 
 const props = defineProps<{
   state: RuleConfigState

app/composables/shiki.ts

@@ -0,0 +1,75 @@
+import type { HighlighterCore } from 'shiki/core'
+import { getHighlighterCore } from 'shiki/core'
+
+const shiki = shallowRef<HighlighterCore>()
+
+getHighlighterCore({
+  themes: [
+    import('shiki/themes/vitesse-light.mjs'),
+    import('shiki/themes/vitesse-dark.mjs'),
+  ],
+  langs: [
+    import('shiki/langs/javascript.mjs'),
+    import('shiki/langs/typescript.mjs'),
+    import('textmate-grammar-glob/grammars/glob.json') as any,
+  ],
+  loadWasm: import('shiki/wasm'),
+}).then((highlighter) => {
+  shiki.value = highlighter
+})
+
+export function useHighlightedGlob(code: () => string) {
+  return computed(() => {
+    if (!shiki.value)
+      return sanitizeHtml(code())
+    return shiki.value.codeToHtml(code(), {
+      lang: 'glob',
+      theme: isDark ? 'vitesse-dark' : 'vitesse-light',
+      transformers: [
+        {
+          root(node) {
+            node.children = [
+              (node.children[0] as any).children[0],
+            ]
+          },
+        },
+      ],
+    })
+  })
+}
+
+export const Shiki = defineComponent({
+  props: {
+    code: {
+      type: String,
+      required: true,
+    },
+    lang: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const highlighted = computed(() => {
+      if (!shiki.value)
+        return sanitizeHtml(props.code)
+      return shiki.value.codeToHtml(props.code, {
+        lang: props.lang,
+        theme: isDark ? 'vitesse-dark' : 'vitesse-light',
+        transformers: [
+          {
+            pre(node) {
+              node.properties.style = ''
+            },
+          },
+        ],
+      })
+    })
+
+    return () => h('div', { innerHTML: highlighted.value })
+  },
+})
+
+function sanitizeHtml(html: string) {
+  return html.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}

nuxt.config.ts

@@ -5,7 +5,6 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     '@unocss/nuxt',
     '@nuxt/eslint',
-    'nuxt-shiki',
     'nuxt-eslint-auto-explicit-import',
   ],
 

package.json

@@ -71,8 +71,9 @@
     "lint-staged": "^15.2.2",
     "nuxt": "^3.11.2",
     "nuxt-eslint-auto-explicit-import": "^0.0.2",
-    "nuxt-shiki": "^0.3.0",
+    "shiki": "^1.2.4",
     "simple-git-hooks": "^2.11.1",
+    "textmate-grammar-glob": "^0.0.1",
     "typescript": "^5.4.4",
     "unbuild": "^2.0.0",
     "vue-tsc": "^2.0.10"