diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue
index 5cfd668..2aa3566 100644
--- a/src/components/ui/button/Button.vue
+++ b/src/components/ui/button/Button.vue
@@ -5,13 +5,13 @@ import { type ButtonVariants, buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
+  variant?: ButtonVariants[`variant`]
+  size?: ButtonVariants[`size`]
+  class?: HTMLAttributes[`class`]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
+  as: `button`,
 })
 </script>
 
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index 1b00c32..bb522b1 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -3,31 +3,31 @@ import { type VariantProps, cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  `inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: `bg-primary text-primary-foreground hover:bg-primary/90`,
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+          `bg-destructive text-destructive-foreground hover:bg-destructive/90`,
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          `border border-input bg-background hover:bg-accent hover:text-accent-foreground`,
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+          `bg-secondary text-secondary-foreground hover:bg-secondary/80`,
+        ghost: `hover:bg-accent hover:text-accent-foreground`,
+        link: `text-primary underline-offset-4 hover:underline`,
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        xs: 'h-7 rounded px-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        default: `h-10 px-4 py-2`,
+        xs: `h-7 rounded px-2`,
+        sm: `h-9 rounded-md px-3`,
+        lg: `h-11 rounded-md px-8`,
+        icon: `h-10 w-10`,
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: `default`,
+      size: `default`,
     },
   },
 )
diff --git a/src/components/ui/popover/PopoverContent.vue b/src/components/ui/popover/PopoverContent.vue
index e691fe8..fef5ced 100644
--- a/src/components/ui/popover/PopoverContent.vue
+++ b/src/components/ui/popover/PopoverContent.vue
@@ -14,9 +14,9 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<PopoverContentProps & { class?: HTMLAttributes[`class`] }>(),
   {
-    align: 'center',
+    align: `center`,
     sideOffset: 4,
   },
 )
diff --git a/src/components/ui/select/SelectContent.vue b/src/components/ui/select/SelectContent.vue
index 4fe234b..19f660e 100644
--- a/src/components/ui/select/SelectContent.vue
+++ b/src/components/ui/select/SelectContent.vue
@@ -16,9 +16,9 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<SelectContentProps & { class?: HTMLAttributes[`class`] }>(),
   {
-    position: 'popper',
+    position: `popper`,
   },
 )
 const emits = defineEmits<SelectContentEmits>()
diff --git a/src/components/ui/select/SelectGroup.vue b/src/components/ui/select/SelectGroup.vue
index 407d8ad..bb064cb 100644
--- a/src/components/ui/select/SelectGroup.vue
+++ b/src/components/ui/select/SelectGroup.vue
@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import { SelectGroup, type SelectGroupProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/select/SelectItem.vue b/src/components/ui/select/SelectItem.vue
index b102a81..b685033 100644
--- a/src/components/ui/select/SelectItem.vue
+++ b/src/components/ui/select/SelectItem.vue
@@ -10,7 +10,7 @@ import {
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -31,7 +31,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
       <SelectItemIndicator>
         <Check class="h-4 w-4" />
       </SelectItemIndicator>
diff --git a/src/components/ui/select/SelectLabel.vue b/src/components/ui/select/SelectLabel.vue
index 3d45cdb..f0059d0 100644
--- a/src/components/ui/select/SelectLabel.vue
+++ b/src/components/ui/select/SelectLabel.vue
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes[`class`] }>()
 </script>
 
 <template>
diff --git a/src/components/ui/select/SelectScrollDownButton.vue b/src/components/ui/select/SelectScrollDownButton.vue
index 54b6c6a..7f7acb3 100644
--- a/src/components/ui/select/SelectScrollDownButton.vue
+++ b/src/components/ui/select/SelectScrollDownButton.vue
@@ -4,7 +4,7 @@ import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardPro
 import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/select/SelectScrollUpButton.vue b/src/components/ui/select/SelectScrollUpButton.vue
index 5535f1c..86f7e50 100644
--- a/src/components/ui/select/SelectScrollUpButton.vue
+++ b/src/components/ui/select/SelectScrollUpButton.vue
@@ -4,7 +4,7 @@ import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps }
 import { ChevronUp } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/select/SelectSeparator.vue b/src/components/ui/select/SelectSeparator.vue
index 5ae593d..2d5e3a9 100644
--- a/src/components/ui/select/SelectSeparator.vue
+++ b/src/components/ui/select/SelectSeparator.vue
@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/select/SelectTrigger.vue b/src/components/ui/select/SelectTrigger.vue
index c90ab63..4c53249 100644
--- a/src/components/ui/select/SelectTrigger.vue
+++ b/src/components/ui/select/SelectTrigger.vue
@@ -4,7 +4,7 @@ import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } f
 import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+      <ChevronDown class="h-4 w-4 shrink-0 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>
diff --git a/src/utils/MDKatex.js b/src/utils/MDKatex.js
index 4b15c34..780db3d 100644
--- a/src/utils/MDKatex.js
+++ b/src/utils/MDKatex.js
@@ -16,7 +16,6 @@ function createRenderer(display) {
     if (display) {
       return `<section style="text-align: center; overflow: auto;">${svg.outerHTML}</section>`
     }
-
     return `<span style="vertical-align: middle; line-height: 1;">${svg.outerHTML}</span>`
   }
 }
diff --git a/src/utils/renderer.ts b/src/utils/renderer.ts
index 4127a58..6d44d92 100644
--- a/src/utils/renderer.ts
+++ b/src/utils/renderer.ts
@@ -100,9 +100,6 @@ export function initRenderer(opts: IOpts) {
   }
 
   function styledContent(styleLabel: string, content: string, tagName?: string): string {
-    if (!content) {
-      return ``
-    }
     const tag = tagName ?? styleLabel
     return `<${tag} ${styles(styleLabel)}>${content}</${tag}>`
   }
@@ -172,8 +169,9 @@ export function initRenderer(opts: IOpts) {
         .replace(/\r\n/g, `<br/>`)
         .replace(/\n/g, `<br/>`)
         .replace(/(>[^<]+)|(^[^<]+)/g, str => str.replace(/\s/g, `&nbsp;`))
-
-      return `<pre class="hljs code__pre" ${styles(`code_pre`)}><span class="mac-sign" style="padding: 10px 14px 0;" hidden>${macCodeSvg}</span><code class="language-${lang}" ${styles(`code`)}>${highlighted}</code></pre>`
+      const span = `<span class="mac-sign" style="padding: 10px 14px 0;" hidden>${macCodeSvg}</span>`
+      const code = `<code class="language-${lang}" ${styles(`code`)}>${highlighted}</code>`
+      return `<pre class="hljs code__pre" ${styles(`code_pre`)}>${span}${code}</pre>`
     },
 
     codespan({ text }: Tokens.Codespan): string {
@@ -254,7 +252,7 @@ export function initRenderer(opts: IOpts) {
       return styledContent(`td`, text)
     },
 
-    hr(): string {
+    hr(_: Tokens.Hr): string {
       return styledContent(`hr`, ``)
     },
   }