Docusaurus 的 MDX 特性

MDX = Markdown with JSX。本文介绍 Docusaurus 中特别的 MDX 语法，按照笔者的使用频率排序。

这里的很多内容都摘自 Docusaurus 介绍 | Docusaurus。

代码块

Docusaurus 提供了代码块标题、行号、高亮支持。

```jsx title='/src/components/HelloCodeTitle.js' showLineNumbers
function HelloCodeTitle(props) {
  // highlight-next-line
  return <h1>Hello, {props.name}</h1>;
}
```

注：像上面这样，代码块中包括了 ```，应该用 ```` 开始这一个代码块。

/src/components/HelloCodeTitle.js

function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}

告示

:::info[Your Title **with** some _Markdown_ `syntax`!]

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

Your Title with some Markdown syntax!

Some content with Markdown syntax. Check this api.

总共有 note、tip、info、warning、danger。告示可以嵌套。

更好看的 <details>

笔者 swizzle 了这个组件：关于mNotebook。

<details>
  <summary>Toggle me!</summary>

  This is the detailed content

  ```js
  console.log("Markdown features including the code block are available");
  ```

  You can use Markdown here including **bold** and _italic_ text, and [inline link](https://docusaurus.io)
</details>

Toggle me!

This is the detailed content

console.log("Markdown features including the code block are available");

You can use Markdown here including bold and italic text, and inline link