Markdown

Markdown 區塊可讓您在 MDX 檔案中匯入和包含純 Markdown。

Screenshot of Markdown block

在匯入 Markdown 檔案時，請務必在匯入路徑上使用 ?raw 後綴，以確保內容按原樣匯入，而不是被評估。

{/* 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 設定了以下屬性

`children`

類型：string

提供要解析和顯示的 Markdown 格式字串。

`options`

指定傳遞至底層 markdown-to-jsx 函式庫的選項。

為什麼不直接匯入 Markdown？

從純技術的角度來看，我們可以像這樣將匯入的 Markdown 直接包含在 MDX 檔案中

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

但是，純 Markdown 和 MDX2 之間存在細微的語法差異。MDX2 更嚴格，會將某些內容解釋為 JSX 表達式。以下是一個完全有效的 Markdown 檔案範例，如果由 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 檔案之間的呈現方式會有所不同。

# 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>