Markdown

Markdown 块允许你在 MDX 文件中导入和包含纯 markdown。

¥The Markdown block allows you to import and include plain markdown in your MDX files.

导入 markdown 文件时，务必在导入路径上使用 ?raw 后缀，以确保内容按原样导入，并且不会被评估：

¥When importing markdown files, it’s important to use the ?raw suffix on the import path to ensure the content is imported as-is, and isn’t being evaluated:

{/* README.md */}
 
# Button
 
Primary UI component for user interaction
 
```js
import { Button } from "@storybook/design-system";
```

{/* Header.mdx */}
 
// DON'T do this, will error
import ReadMe from './README.md';
// DO this, will work
import ReadMe from './README.md?raw';
 
import { Markdown } from '@storybook/blocks';
 
# A header 
 
<Markdown>{ReadMe}</Markdown>

Markdown

import { Markdown } from '@storybook/blocks';

Markdown 配置了以下属性：

¥Markdown is configured with the following props:

children

类型：string

¥Type: string

提供要解析和显示的 markdown 格式的字符串。

¥Provides the markdown-formatted string to parse and display.

options

指定传递给底层 markdown-to-jsx 库 的选项。

¥Specifies the options passed to the underlying markdown-to-jsx library.

为什么不直接导入 markdown？

¥Why not import markdown directly?

从纯技术角度来看，我们可以将导入的 markdown 直接包含在 MDX 文件中，如下所示：

¥From a purely technical standpoint, we could include the imported markdown directly in the MDX file like this:

{/* THIS WON'T WORK, THIS IS TO DEMONSTRATE AN ERROR */}
 
import ReadMe from './README.md';
 
# A header 
 
{ReadMe}

但是，纯 markdown 和 MDX2 之间存在细微的语法差异。MDX2 更严格，会将某些内容解释为 JSX 表达式。以下是完全有效的 markdown 文件的示例，如果直接由 MDX2 处理，该文件将会中断：

¥However, there are small syntactical differences between plain markdown and MDX2. MDX2 is more strict and will interpret certain content as JSX expressions. Here’s an example of a perfectly valid markdown file, that would break if it was handled directly by MDX2:

# A header
 
{ this is valid in a plain markdown file, but MDX2 will try to evaluate this as an expression }
 
<This is also valid, but MDX2 thinks this is a JSX component />

此外，MDX2 将所有字符串用 p 标签或类似标签换行，这意味着内容在纯 .md 文件和 .mdx 文件之间的渲染方式不同。

¥Furthermore, MDX2 wraps all strings on newlines in p tags or similar, meaning that content would render differently between a plain .md file and an .mdx file.

# A header
 
<div>
  Some text
</div>
 
The example above will remain as-is in plain markdown, but MDX2 will compile it to:
 
# A header
 
<div>
  <p>Some text</p>
</div>