fix(search): fix highlighting in detailed view

mark.js ships dist as IIFE which causes lot of issues, but is also has its source available in the package which is _almost_ ESM, so directly using it and locking the version to avoid any issues due to internal changes

package.json

@@ -93,7 +93,7 @@
     "@vue/devtools-api": "^6.5.0",
     "@vueuse/core": "^10.0.2",
     "body-scroll-lock": "4.0.0-beta.0",
-    "mark.js": "^8.11.1",
+    "mark.js": "8.11.1",
     "minisearch": "^6.0.1",
     "shiki": "^0.14.1",
     "vite": "^4.2.1",

src/client/shim.d.ts

@@ -26,3 +26,9 @@ declare module '@localSearchIndex' {
   const data: Record<string, () => Promise<{ default: string }>>
   export default data
 }
+
+declare module 'mark.js/src/vanilla.js' {
+  import type { Mark } from 'mark.js'
+  const mark: Mark
+  export default mark
+}

src/client/theme-default/components/VPLocalSearchBox.vue

@@ -9,6 +9,7 @@ import {
   useScrollLock,
   useSessionStorage
 } from '@vueuse/core'
+import Mark from 'mark.js/src/vanilla.js'
 import MiniSearch, { type SearchResult } from 'minisearch'
 import { useRouter } from 'vitepress'
 import {
@@ -112,8 +113,7 @@ watch(filterText, () => {
 
 const mark = computedAsync(async () => {
   if (!resultsEl.value) return
-  const mod = await import('mark.js')
-  return markRaw(new (mod.default ?? mod)(resultsEl.value))
+  return markRaw(new Mark(resultsEl.value))
 }, null)
 
 debouncedWatch(