@modern-js/doc-tools-doc/docs/en/api/config/config-build.mdx

Website for @modern-js/doc-tools

# Build Config

## builderConfig

- Type: `Object`

Used to customize the configurations of Modern.js Builder. For complete configurations, please refer to [Modern.js Builder - API](https://modernjs.dev/builder/en/api/index.html).

For example, change the output directory to `doc_dist`:

```ts title="modern.config.ts"
export default defineConfig({
  doc: {
    builderConfig: {
      output: {
        distPath: {
          root: 'doc_dist',
        },
      },
    },
  },
});
```

## builderPlugins

- Type: `BuilderPlugin[]`

Used to customize the [plugins of Modern.js Builder](https://modernjs.dev/builder/en/plugins/introduction.html). For example:

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';
import { builderPluginStylus } from '@modern-js/builder-plugin-stylus';

export default defineConfig({
  doc: {
    builderPlugins: [builderPluginStylus()],
  },
  plugins: [docTools()],
});
```

### Default Config

If you need to see the default `builderConfig`, you can add the `DEBUG=builder` parameter when running the `modern dev` or `modern build` command:

```bash
DEBUG=builder modern dev
```

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

> Please refer to [Modern.js Builder - Debug Mode](https://modernjs.dev/builder/en/guide/debug/debug-mode.html) for more information on how to debug the Builder.

## markdown

- Type: `Object`

Configure MDX-related compilation abilities.

### markdown.remarkPlugins

- Type: `Array`
- Default: `[]`

Configure the remark plugins. for example:

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';

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

### markdown.rehypePlugins

- Type: `Array`

Configure the rehype plugin. for example:

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';

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

### markdown.checkDeadLinks

- Type: `boolean`
- Default: `false`

Whether to check for dead links. for example:

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';

export default defineConfig({
  doc: {
    markdown: {
      checkDeadLinks: true,
    },
  },
  plugins: [docTools()],
});
```

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.experimentalMdxRs

- Type: `boolean`

Whether to use the Rust version of the MDX compiler, an experimental feature. For example:

import MdxRs from '../../fragments/mdx-rs';

<MdxRs />

### markdown.showLineNumbers

- Type: `boolean`

Whether to display the line number of the code block. 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:

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';
import path from 'path';

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

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

```mdx title="test.mdx"
<Alert type="info">This is a info alert</Alert>
```

:::danger Danger
Do not enable `experimentalMdxRs` when configuring `globalComponents`, otherwise the global components will not take effect.
:::