close
Rspress
指南
插件
API
版本
指南
插件
API
简体中文

使用 MDX

Rspress 支持 MDX，这是一种功能强大的内容开发方式。

Markdown

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

# Hello world

Front matter

你可以在 Markdown 文件的顶部添加 front matter，它是一个特殊部分，使用 YAML 格式来定义元数据，被包含在文件顶部的三个连字符 --- 之间。

例如使用 title 来指定页面的标题：

---
title: Hello world
---

你还可以在正文中访问 front matter 中定义的属性，例如：

---
title: Hello world
---

# {frontmatter.title}

前面定义的属性将作为 frontmatter 属性传递给组件。所以最终输出将是：

<h1>Hello world</h1>
TIP

查看 Front matter 配置 了解可用的 front matter 配置。

代码块

基本使用

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

输入:

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

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

输出:

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

代码行高亮

你可以通过如下的语法指定代码行高亮，比如:

输入:

```js
console.log('Hello World'); // [\!code highlight]

// [\!code highlight:3]
const a = 1;
console.log(a);
const b = 2;
console.log(b);
```
WARNING

在 [\!code highlight] 中的反斜杠（\）是为了在 Markdown 中转义以显示原始语法。在实际使用该语法时，请不要包含此反斜杠。

输出:

console.log('Hello World'); 

const a = 1;
console.log(a);
const b = 2;
console.log(b);

你也可以同时应用代码行高亮和代码块标题，比如:

输入:

```js title="hello.js"
console.log('Hello World'); // [\!code highlight]

// [\!code highlight:3]
const a = 1;

console.log(a);

const b = 2;

console.log(b);
```

输出:

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

const a = 1;

console.log(a);

const b = 2;

console.log(b);

显示代码行号

如果你想要显示代码行号，你可以在配置文件中开启 showLineNumbers 选项:

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

Wrap code

如果你想要默认启用长代码换行展示，你可以在配置文件中开启 defaultWrapCode 选项:

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

自定义锚点 id

默认情况下，Rspress 会根据各个标题的内容自动生成 id，这个 id 也会作为锚点的内容，你可以通过如下的语法来自定义 header 的 id:

## Hello world \{#custom-id}

其中 custom-id 就是你自定义的 id。