Markdown 与 MDX#

Rspress 不仅支持 Markdown，还支持 MDX，这是一种强大的内容开发方式。

Markdown#

MDX 是 Markdown 的超集，这意味着您可以像往常一样编写 Markdown 文件。例如：

# Hello world

使用组件#

当您想在 Markdown 文件中使用 React 组件时，应该使用 .mdx 扩展名来命名文件。例如：

// docs/index.mdx
import { CustomComponent } from './custom';

# Hello world

<CustomComponent />

Front Matter#

您可以在 Markdown 文件的开头添加 Front Matter，它是一个 YAML 格式的对象，用于定义一些元数据。例如：

---
title: Hello world
---

注意：默认情况下，Rspress 使用 h1 标题作为 HTML 标题。

您也可以在正文中访问 Front Matter 中定义的属性，例如：

---
title: Hello world
---

# {frontmatter.title}

先前定义的属性将作为 frontmatter 属性传递给组件。因此最终的输出将是：

<h1>Hello world</h1>

自定义容器#

您可以使用 ::: 语法来创建自定义容器并支持自定义标题。例如：

输入：

:::tip
This is a `block` of type `tip`
:::

:::info
This is a `block` of type `info`
:::

:::warning
This is a `block` of type `warning`
:::

:::danger
This is a `block` of type `danger`
:::

::: details
This is a `block` of type `details`
:::

:::tip Custom Title
This is a `block` of `Custom Title`
:::

:::tip{title="Custom Title"}
This is a `block` of `Custom Title`
:::

输出：

代码块#

基本用法#

您可以使用 ``` 语法来创建代码块并支持自定义标题。例如：

Input:

```js
console.log('Hello World');
```

```js title="hello.js"
console.log('Hello World');
```

输出：

console.log('Hello World');

console.log('Hello World');

显示行号#

如果您想显示行号，可以在配置文件中启用 showLineNumbers 选项：

export default {
  // ...
  markdown: {
    showLineNumbers: true,
  },
};

代码换行#

如果您默认想要对长代码行进行换行，可以在配置文件中启用 defaultWrapCode 选项：

export default {
  // ...
  markdown: {
    defaultWrapCode: true,
  },
};

行高亮#

您也可以同时应用行高亮和代码块标题，例如：

Input:

```js title="hello.js" {1,3-5}
console.log('Hello World');

const a = 1;

console.log(a);

const b = 2;

console.log(b);
```

输出：

1console.log('Hello World');
2
3const a = 1;
4
5console.log(a);
6
7const b = 2;
8
9console.log(b);

Rustify MDX 编译器#

您可以通过以下配置启用 Rustify MDX 编译器：