Build Config#

builderConfig#

• Type: RsbuildConfig

Used to customize the configurations of Rsbuild. For detailed configurations, please refer to Rsbuild - Config.

For example, change the output directory to doc_dist:

export default defineConfig({
  builderConfig: {
    output: {
      distPath: {
        root: 'doc_dist',
      },
    },
  },
});

builderPlugins#

• Type: RsbuildPlugin[]

Used to register Rsbuild plugins.

You can use the rich plugins of Rsbuild in the Rspress project to quickly extend the building capabilities.

• Example: Support Vue SFC through @rsbuild/plugin-vue

import { defineConfig } from 'rspress/config';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  builderPlugins: [pluginVue()],
});

• Example: Add Google analytics through rsbuild-plugin-google-analytics

import { defineConfig } from 'rspress/config';
import { pluginGoogleAnalytics } from 'rsbuild-plugin-google-analytics';

export default defineConfig({
  builderPlugins: [
    pluginGoogleAnalytics({
      // replace this with your Google tag ID
      id: 'G-xxxxxxxxxx',
    }),
  ],
});

• Example: Add Open Graph meta tags through rsbuild-plugin-open-graph

import { defineConfig } from 'rspress/config';
import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';

export default defineConfig({
  builderPlugins: [
    pluginOpenGraph({
      title: 'My Website',
      type: 'website',
      // ...options
    }),
  ],
});

Default Config#

If you need to view the default Rspack or Rsbuild configs, you can add the DEBUG=rsbuild parameter when running the rspress dev or rspress build command:

DEBUG=rsbuild rspress dev

After execution, the rsbuild.config.js file is created in the doc_build directory, which contains the complete builderConfig.

Please refer to Rsbuild - Debug Mode for more information on how to debug the Rsbuild.

markdown#

• Type: Object

Configure MDX-related compilation abilities.

markdown.remarkPlugins#

• Type: Array
• Default: []

Configure the remark plugins. for example:

import { defineConfig } from 'rspress/config';

export default defineConfig({
  markdown: {
    remarkPlugins: [
      [
        require('remark-autolink-headings'),
        {
          behavior: 'wrap',
        },
      ],
    ],
  },
});

markdown.rehypePlugins#

• Type: Array

Configure the rehype plugin. for example:

import { defineConfig } from 'rspress/config';

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [
        require('rehype-autolink-headings'),
        {
          behavior: 'wrap',
        },
      ],
    ],
  },
});

markdown.checkDeadLinks#

• Type: boolean
• Default: false

Whether to check for dead links. for example:

import { defineConfig } from 'rspress/config';

export default defineConfig({
  markdown: {
    checkDeadLinks: true,
  },
});

After enabling this config, the framework will check the links in the document based on the conventional routing table. If there is an unreachable link, the build will throw an error and exit.

markdown.mdxRs#

• Type: boolean | { include: (filepath: string) => boolean }

• Default: true

Whether to use the Rust version of the MDX compiler. For example:

import { defineConfig } from 'rspress/config';

export default defineConfig({
  markdown: {
    // Switch to the JS version of the compiler
    mdxRs: false,
  },
});

You can also provide a function to determine which files use the Rust version of MDX compiler. For example:

import { defineConfig } from 'rspress/config';

export default defineConfig({
  markdown: {
    mdxRs: {
      include: (filepath: string) => filepath.includes('foo.mdx'),
    },
  },
});

markdown.showLineNumbers#

• Type: boolean

Whether to display the line number of the code block. Defaults to false.

markdown.defaultWrapCode#

• Type: boolean

Whether to enable long code line wrapping display by default. Defaults to false.

markdown.globalComponents#

• Type: string[]

Register component to the global scope, which will make it automatically available in every MDX file, without any import statements.For example:

import { defineConfig } from 'rspress/config';
import path from 'path';

export default defineConfig({
  markdown: {
    globalComponents: [path.join(__dirname, 'src/src/components/Alert.tsx')],
  },
});

Then you can use the Alert component in any MDX file:

<Alert type="info">This is a info alert</Alert>

markdown.highlightLanguages#

• Type: (string | [string, string])[]
• Default:

const DEFAULT_HIGHLIGHT_LANGUAGES = [
  ['js', 'javascript'],
  ['ts', 'typescript'],
  ['jsx', 'tsx'],
  'tsx',
  'json',
  'css',
  'scss',
  'less',
  ['xml', 'xml-doc'],
  'diff',
  'yaml',
  ['md', 'markdown'],
  ['mdx', 'tsx'],
  'bash',
];

Register the language needed for code highlighting.

• By default, it is implemented based on Prism.js. You can also switch to Shiki through @rspress/plugin-shiki.
• Default supported languages include js, jsx, ts, tsx, json, css, scss, less, html, xml, diff, yaml, md, mdx, and bash.

Rspress does not register all supported languages by default in order to reduce the bundle size of the build output. You can extend on these default languages, for example:

import { defineConfig } from 'rspress/config';
import path from 'path';

export default defineConfig({
  markdown: {
    highlightLanguages: [
      'ejs',
      'go',
      // Alias as md, full name as markdown
      ['md', 'markdown'],
    ],
  },
});

Each language config supports both string and [string, string] formats. In the array format, the former is the alias of the language, and the latter is the full name of the language. You can go to the file list to view all supported language full names.