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 使用以下 props 進行設定

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