feat: support for searching code blocks (#1797)

Author: chenjiahan

e2e/fixtures/search-code-blocks/doc/index.mdx

@@ -0,0 +1,5 @@
+# Hello world
+
+```js
+console.log('hello from code block');
+```

e2e/fixtures/search-code-blocks/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@rspress-fixture/rspress-search-code-blocks",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rspress build",
+    "dev": "rspress dev",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.17"
+  }
+}

e2e/fixtures/search-code-blocks/rspress.config.ts

@@ -0,0 +1,9 @@
+import * as path from 'node:path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  search: {
+    codeBlocks: true,
+  },
+});

e2e/fixtures/search-code-blocks/tsconfig.json

@@ -0,0 +1 @@
+{}

e2e/tests/search-code-blocks.test.ts

@@ -0,0 +1,31 @@
+import path from 'node:path';
+import { expect, test } from '@playwright/test';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+import { searchInPage } from '../utils/search';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+
+test.describe('search code blocks test', async () => {
+  let appPort;
+  let app;
+
+  test.beforeAll(async () => {
+    const appDir = path.join(fixtureDir, 'search-code-blocks');
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('search index should include content of code blocks', async ({
+    page,
+  }) => {
+    await page.goto(`http://localhost:${appPort}`);
+    const suggestItems = await searchInPage(page, 'hello from code block');
+    expect(suggestItems.length).toBe(1);
+  });
+});

packages/core/src/node/runtimeModule/siteData/extractPageData.ts

@@ -36,6 +36,7 @@ export async function extractPageData(
   root: string,
   routeService: RouteService,
   highlighterLangs: Set<string>,
+  searchCodeBlocks: boolean,
 ): Promise<PageIndexInfo[]> {
   const pageData = await Promise.all(
     routeService
@@ -108,7 +109,7 @@ export async function extractPageData(
             {
               // Skip code blocks
               selector: 'pre > code',
-              format: 'skip',
+              format: searchCodeBlocks ? 'block' : 'skip',
             },
             ...['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map(tag => ({
               selector: tag,

packages/core/src/node/runtimeModule/siteData/index.ts

@@ -41,18 +41,24 @@ export async function siteDataVMPlugin(context: FactoryContext) {
 
   const highlightLanguages: Set<string> = new Set();
   const replaceRules = userConfig?.replaceRules || [];
+
+  const searchConfig = userConfig?.search || {};
+
   // If the dev server restart when config file, we will reuse the siteData instead of extracting the siteData from source files again.
   const domain =
-    userConfig?.search && userConfig?.search?.mode === 'remote'
-      ? (userConfig?.search.domain ?? '')
-      : '';
+    searchConfig?.mode === 'remote' ? (searchConfig.domain ?? '') : '';
+
+  const searchCodeBlocks =
+    'codeBlocks' in searchConfig ? searchConfig.codeBlocks : false;
+
   const pages = await extractPageData(
     replaceRules,
     alias,
     domain,
     userDocRoot,
     routeService,
     highlightLanguages,
+    searchCodeBlocks,
   );
   // modify page index by plugins
   await pluginDriver.modifySearchIndexData(pages);

packages/document/docs/en/api/config/config-basic.mdx

@@ -261,10 +261,21 @@ export default defineConfig({
 
 ## search
 
-- Type: `{ searchHooks: string; versioned: boolean; }`
+- Type:
+
+```ts
+type SearchOptions = {
+  searchHooks?: string;
+  versioned?: boolean;
+  codeBlocks?: boolean;
+};
+```
 
 ### searchHooks
 
+- Type: `string`
+- Default: `undefined`
+
 You can add search runtime hooks logic through the `searchHooks` parameter, for example:
 
 ```ts title="rspress.config.ts"
@@ -282,6 +293,9 @@ For specific hook logic, you can read [Customize Search Functions](/guide/advanc
 
 ### versioned
 
+- Type: `boolean`
+- Default: `false`
+
 If you are using `multiVersion`, the `versioned` parameter allows you to create a separate search index for each version of your documentation.
 When enabled, the search will only query the index corresponding to the currently selected version.
 
@@ -295,6 +309,23 @@ export default defineConfig({
 });
 ```
 
+### codeBlocks
+
+- Type: `boolean`
+- Default: `false`
+
+If enabled, the search index will include code block content, which allows users to search code blocks.
+
+```ts title="rspress.config.ts"
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  search: {
+    codeBlocks: true,
+  },
+});
+```
+
 ## globalUIComponents
 
 - Type: `(string | [string, object])[]`

packages/document/docs/zh/api/config/config-basic.mdx

@@ -261,10 +261,21 @@ export default defineConfig({
 
 ## search
 
-- Type: `{ searchHooks: string; versioned: boolean; }`
+- Type:
+
+```ts
+type SearchOptions = {
+  searchHooks?: string;
+  versioned?: boolean;
+  codeBlocks?: boolean;
+};
+```
 
 ### searchHooks
 
+- Type: `string`
+- Default: `undefined`
+
 你可以通过 `searchHooks` 参数来增加搜索运行时钩子逻辑，比如：
 
 ```ts title="rspress.config.ts"
@@ -282,6 +293,9 @@ export default defineConfig({
 
 ### versioned
 
+- Type: `boolean`
+- Default: `false`
+
 如果你配置了 `multiVersion`，可以使用 `versioned` 参数为文档的每个版本创建单独的搜索索引。开启该选项后，搜索将仅会查询当前所选版本对应的索引。
 
 ```ts title="rspress.config.ts"
@@ -294,6 +308,23 @@ export default defineConfig({
 });
 ```
 
+### codeBlocks
+
+- Type: `boolean`
+- Default: `false`
+
+开启后，搜索的索引将包含代码块的内容，从而允许用户搜索代码块。
+
+```ts title="rspress.config.ts"
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  search: {
+    codeBlocks: true,
+  },
+});
+```
+
 ## globalUIComponents
 
 - Type: `(string | object)[]`

packages/document/rspress.config.ts

@@ -45,6 +45,9 @@ export default defineConfig({
       }),
     ],
   },
+  search: {
+    codeBlocks: true,
+  },
   route: {
     cleanUrls: true,
     exclude: ['**/fragments/**'],