feat(search): Change span to LocalSearchBoxItem

docs/en/reference/default-theme-search.md

@@ -187,6 +187,27 @@ export default defineConfig({
 })
 ```
 
+### Custom Local Search Box Item Component
+
+If you want to customize the search result items in the local search page, you can override the `LocalSearchBoxItem` component similarly:
+
+```js
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme';
+import CustomLocalSearchBoxItem from './components/CustomLocalSearchBoxItem.vue';
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('LocalSearchBoxItem', CustomLocalSearchBoxItem);
+  }
+};
+```
+
+#### Creating a Custom `LocalSearchBoxItem`
+
+To create your own `LocalSearchBoxItem`, define a Vue component that accepts a `content` prop and renders it inside a chosen HTML tag, such as a `<span>`. This allows you to control how search results are displayed while keeping the default functionality.
+
 ## Algolia Search
 
 VitePress supports searching your docs site using [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). Refer their getting started guide. In your `.vitepress/config.ts` you'll need to provide at least the following to make it work:

src/client/app/components/LocalSearchBoxItem.ts

@@ -0,0 +1,13 @@
+import { defineComponent, h } from 'vue'
+
+export const LocalSearchBoxItem = defineComponent({
+  props: {
+    content: {
+      type: String,
+      required: true
+    }
+  },
+  render() {
+    return h('span', { innerHTML: this.content })
+  }
+})

src/client/app/index.ts

@@ -18,6 +18,7 @@ import { dataSymbol, initData, siteDataRef, useData } from './data'
 import { RouterSymbol, createRouter, scrollTo, type Router } from './router'
 import { inBrowser, pathToFile } from './utils'
 import { SidebarTextItem } from './components/SidebarTextItem'
+import { LocalSearchBoxItem } from './components/LocalSearchBoxItem'
 
 function resolveThemeExtends(theme: typeof RawTheme): typeof RawTheme {
   if (theme.extends) {
@@ -80,6 +81,7 @@ export async function createApp() {
   app.component('Content', Content)
   app.component('ClientOnly', ClientOnly)
   app.component('SidebarTextItem', SidebarTextItem)
+  app.component('LocalSearchBoxItem', LocalSearchBoxItem)
 
   // expose $frontmatter & $params
   Object.defineProperties(app.config.globalProperties, {

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

@@ -526,11 +526,11 @@ function onMouseMove(e: MouseEvent) {
                     :key="index"
                     class="title"
                   >
-                    <span class="text" v-html="t" />
+                    <LocalSearchBoxItem class="text" :content="t" />
                     <span class="vpi-chevron-right local-search-icon" />
                   </span>
                   <span class="title main">
-                    <span class="text" v-html="p.title" />
+                    <LocalSearchBoxItem class="text" :content="p.title" />
                   </span>
                 </div>