fix(search): better highlighting in detailed view (#2234)

package.json

@@ -93,6 +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",
     "minisearch": "^6.0.1",
     "shiki": "^0.14.1",
     "vite": "^4.2.1",
@@ -120,6 +121,7 @@
     "@types/fs-extra": "^11.0.1",
     "@types/koa": "^2.13.6",
     "@types/koa-static": "^4.0.2",
+    "@types/mark.js": "^8.11.8",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-attrs": "^4.1.0",
     "@types/markdown-it-container": "^2.0.5",

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

@@ -8,19 +8,20 @@ import {
   useLocalStorage,
   useSessionStorage
 } from '@vueuse/core'
+import Mark from 'mark.js'
 import MiniSearch, { type SearchResult } from 'minisearch'
 import { useRouter } from 'vitepress'
 import {
+  computed,
   createApp,
   markRaw,
   nextTick,
   onMounted,
   ref,
   shallowRef,
   watch,
-  type Ref,
-  computed,
-  watchEffect
+  watchEffect,
+  type Ref
 } from 'vue'
 import type { ModalTranslations } from '../../../../types/local-search'
 import { pathToFile, withBase } from '../../app/utils'
@@ -177,9 +178,6 @@ debouncedWatch(
             .map((t) => t?.replace(reg, `<mark>$&</mark>`))
             .filter(Boolean)
         }
-        if (showDetailedListValue && match.includes('text')) {
-          text = text.replace(reg, `<mark>$&</mark>`)
-        }
       }
 
       return { ...r, title, titles, text }
@@ -188,10 +186,11 @@ debouncedWatch(
 
     await nextTick()
     const excerpts = el.value?.querySelectorAll('.result .excerpt') ?? []
+    let i = 0
     for (const excerpt of excerpts) {
-      excerpt.querySelector('mark')?.scrollIntoView({
-        block: 'center'
-      })
+      new Mark(excerpt as HTMLElement).mark(Object.keys(results.value[i].match))
+      excerpt.querySelector('mark')?.scrollIntoView({ block: 'center' })
+      i += 1
     }
   },
   { debounce: 200, immediate: true }
@@ -526,7 +525,7 @@ useEventListener('popstate', (event) => {
   </Teleport>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .VPLocalSearchBox {
   position: fixed;
   z-index: 100;