diff --git a/docs/pages/docs/guide/_meta.ts b/docs/pages/docs/guide/_meta.ts
index b5984190ba..95f63a8d72 100644
--- a/docs/pages/docs/guide/_meta.ts
+++ b/docs/pages/docs/guide/_meta.ts
@@ -7,6 +7,7 @@ export default {
ssg: 'Next.js SSG',
i18n: 'Next.js I18n',
'custom-css': '',
+ search: '',
advanced: '',
'built-ins': 'Built-ins'
}
diff --git a/docs/pages/docs/guide/search.mdx b/docs/pages/docs/guide/search.mdx
new file mode 100644
index 0000000000..45a357dd4f
--- /dev/null
+++ b/docs/pages/docs/guide/search.mdx
@@ -0,0 +1,12 @@
+# Search
+
+Nextra features full-page search, that includes list items, code blocks,
+headings and table cells.
+
+## Search in `
{:html}`
+
+Inline `
{:html}` can be searched as well as code blocks.
+
+```html
+I'm Searchable!
+```
diff --git a/packages/nextra/src/server/remark-plugins/remark-structurize.ts b/packages/nextra/src/server/remark-plugins/remark-structurize.ts
index 6806e00cdf..e59c2ce43b 100644
--- a/packages/nextra/src/server/remark-plugins/remark-structurize.ts
+++ b/packages/nextra/src/server/remark-plugins/remark-structurize.ts
@@ -1,6 +1,9 @@
import type { Root } from 'mdast'
import type { Plugin } from 'unified'
import type { Search, StructurizedData } from '../../types'
+import type { HProperties } from './remark-custom-heading-id'
+
+type RootContent = Root['children'][number]
const CODE_TABLE_QUOTE_LIST = new Set([
'code',
@@ -37,7 +40,7 @@ export const remarkStructurize: Plugin<[Search], Root> = options => {
}
}
- function walk(node: any): string {
+ function walk(node: RootContent | Root): string {
let result = ''
const { type } = node
@@ -56,10 +59,15 @@ export const remarkStructurize: Plugin<[Search], Root> = options => {
}
} else if (
(opts.codeblocks && type === 'code') ||
- ['text', 'inlineCode', 'tableCell'].includes(type)
+ type === 'text' ||
+ type === 'inlineCode' ||
+ type === 'tableCell'
) {
- result += node.value
- if (!skip) content += node.value
+ // Inline code may have an `{:language}` suffix, trim this off if it exists.
+ const value =
+ type === 'inlineCode' ? node.value.replace(/\{:\w+}$/, '') : node.value
+ result += value
+ if (!skip) content += value
}
if (
@@ -78,7 +86,8 @@ export const remarkStructurize: Plugin<[Search], Root> = options => {
if (node.depth > 1) {
save()
content = '' // reset content after h1 content
- activeSlug = node.data.hProperties.id + '#' + result
+ const hProperties = node.data!.hProperties as HProperties
+ activeSlug = hProperties.id + '#' + result
}
}
return result