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",

pnpm-lock.yaml

@@ -22,6 +22,9 @@ importers:
       body-scroll-lock:
         specifier: 4.0.0-beta.0
         version: 4.0.0-beta.0
+      mark.js:
+        specifier: ^8.11.1
+        version: 8.11.1
       minisearch:
         specifier: ^6.0.1
         version: 6.0.1
@@ -98,6 +101,9 @@ importers:
       '@types/koa-static':
         specifier: ^4.0.2
         version: 4.0.2
+      '@types/mark.js':
+        specifier: ^8.11.8
+        version: 8.11.8
       '@types/markdown-it':
         specifier: ^12.2.3
         version: 12.2.3
@@ -987,6 +993,12 @@ packages:
     resolution: {integrity: sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==}
     dev: true
 
+  /@types/jquery@3.5.16:
+    resolution: {integrity: sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==}
+    dependencies:
+      '@types/sizzle': 2.3.3
+    dev: true
+
   /@types/jsonfile@6.1.1:
     resolution: {integrity: sha512-GSgiRCVeapDN+3pqA35IkQwasaCh/0YFH5dEF6S88iDvEn901DjOeH3/QPY+XYP1DFzDZPvIvfeEgk+7br5png==}
     dependencies:
@@ -1033,6 +1045,12 @@ packages:
     resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
     dev: true
 
+  /@types/mark.js@8.11.8:
+    resolution: {integrity: sha512-BoWCd9ydi1hZxDfu/lF0v1hHMsNUjuxZEDJsdHlmm6GlKk4qxlLya7D3FS81QmabwFbYPpoDOh9603JESUkHbA==}
+    dependencies:
+      '@types/jquery': 3.5.16
+    dev: true
+
   /@types/markdown-it-attrs@4.1.0:
     resolution: {integrity: sha512-ILGUUJf7gydzxY3FrN2XwFT/f6rfxtkXZal478Jf4vqFn2AkQCwGCTx3TI+IPT+5ipOf+hUplem8wfVuCyK/Pw==}
     dependencies:
@@ -1113,6 +1131,10 @@ packages:
       '@types/node': 18.15.11
     dev: true
 
+  /@types/sizzle@2.3.3:
+    resolution: {integrity: sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==}
+    dev: true
+
   /@types/web-bluetooth@0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
     dev: false
@@ -3028,6 +3050,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /mark.js@8.11.1:
+    resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
+    dev: false
+
   /markdown-it-anchor@8.6.7(@types/markdown-it@12.2.3)(markdown-it@13.0.1):
     resolution: {integrity: sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==}
     peerDependencies:

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

@@ -8,9 +8,11 @@ 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,
@@ -18,9 +20,8 @@ import {
   ref,
   shallowRef,
   watch,
-  type Ref,
+  watchEffect,
-  computed,
+  type Ref
-  watchEffect
 } 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({
+      new Mark(excerpt as HTMLElement).mark(Object.keys(results.value[i].match))
-        block: 'center'
+      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;