feat: shift code hue to match more with the theme

eslint · Apr 9, 2024 · 9442360 · 9442360
1 parent a8e36ee
commit 9442360
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 38 deletions.
diff --git a/app/components/ConfigItem.vue b/app/components/ConfigItem.vue
@@ -6,7 +6,6 @@ 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

diff --git a/app/components/GlobItem.vue b/app/components/GlobItem.vue
@@ -44,7 +44,7 @@ const Noop = defineComponent({ setup: (_, { slots }) => () => slots.default?.()
       font-mono text-gray
       :class="active === true ? 'badge-active' : active === false ? 'badge op50' : 'badge'"
     >
-      <span v-html="highlighted" />
+      <span class="filter-hue-rotate-180" v-html="highlighted" />
     </component>
     <template #popper="{ shown, hide }">
       <div v-if="shown && popup === 'files'" max-h="30vh" min-w-80 p3 of-auto>

diff --git a/app/components/RuleStateItem.vue b/app/components/RuleStateItem.vue
@@ -5,7 +5,6 @@ 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

diff --git a/app/components/Shiki.ts b/app/components/Shiki.ts
@@ -0,0 +1,36 @@
+// @unocss-include
+export default defineComponent({
+  name: 'Shiki',
+  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.value ? 'vitesse-dark' : 'vitesse-light',
+        transformers: [
+          {
+            pre(node) {
+              node.properties.style = ''
+            },
+          },
+        ],
+      })
+    })
+
+    return () => h('div', {
+      class: 'filter-hue-rotate-90',
+      innerHTML: highlighted.value,
+    })
+  },
+})
diff --git a/app/composables/shiki.ts b/app/composables/shiki.ts
@@ -1,7 +1,7 @@
 import type { HighlighterCore } from 'shiki/core'
 import { getHighlighterCore } from 'shiki/core'
 
-const shiki = shallowRef<HighlighterCore>()
+export const shiki = shallowRef<HighlighterCore>()
 
 getHighlighterCore({
   themes: [
@@ -24,44 +24,12 @@ export function useHighlightedGlob(code: () => string) {
       return sanitizeHtml(code())
     return shiki.value.codeToHtml(code(), {
       lang: 'glob',
-      theme: isDark ? 'vitesse-dark' : 'vitesse-light',
+      theme: isDark.value ? 'vitesse-dark' : 'vitesse-light',
       structure: 'inline',
     })
   })
 }
 
-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) {
+export function sanitizeHtml(html: string) {
   return html.replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }