> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiIxOTIwYjdlMy04ZDYxLTRlZmMtOWEwZi01OGFmZTAxNjY0OWYiLCJleHAiOjE3NzgyNTkwOTUsImlhdCI6MTc3ODI1ODc5NX0.FaNx6HJaTGODIFRw_Akp3Ck-IkWObvUh0yQ_ipQo8ug
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# Markdown 中的富媒体

> 在您的 Fern 文档中嵌入图像、视频、PDF、LaTeX 方程式和图表。

使用富媒体内容增强您的文档，包括图像、视频、PDF、数学方程式和图表。

## 图像

您可以使用本地存储的图像或 URL 在 Markdown 页面中包含图像。使用 [Markdown 语法](https://www.markdownguide.org/basic-syntax/#images-1) 或 [`<img>` HTML 标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) 来插入图像。不要使用 `<embed>` 元素，因为它的浏览器支持不一致。

<Info title="图像路径">
  您可以使用相对于页面位置的路径（使用 `./` 或 `../`）或相对于 `fern` 文件夹根目录的路径（使用 `/`）来引用图像。例如，位于 `fern/assets/images/logo.png` 的图像可以从任何页面引用为 `/assets/images/logo.png`。
</Info>

<Tabs>
  <Tab title="Markdown">
    ```markdown
    <!-- 相对于页面位置 -->
    ![Alt text](../../assets/images/logo.png "可选标题")

    <!-- 相对于 fern 文件夹根目录 -->
    ![Alt text](/assets/images/logo.png "可选标题")
    ```
  </Tab>

  <Tab title="HTML">
    ```html
    <!-- 相对于页面位置 -->
    <img src="../../assets/images/logo.png" width="500px" height="auto" />

    <!-- 相对于 fern 文件夹根目录 -->
    <img src="/assets/images/logo.png" width="500px" height="auto" />
    ```
  </Tab>
</Tabs>

常见图像属性：

| 属性                 | 描述             |
| ------------------ | -------------- |
| `src`              | 图像文件的 URL 或路径  |
| `alt`              | 用于无障碍访问的替代文本   |
| `title`            | 鼠标悬停时显示的工具提示文本 |
| `width` 和 `height` | 图像的尺寸（px）      |
| `noZoom`           | 禁用图像缩放功能       |

<Note>
  有关 HTML 图像元素及其属性的更多详细信息，请参阅 [MDN 关于 img 元素的文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)。
</Note>

## PDF

使用 `<iframe>` 元素嵌入 PDF。不要使用 `<embed>` 元素，因为它的浏览器支持不一致。

<Tabs>
  <Tab title="渲染的 PDF">
    <iframe src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/895aa63b32f0782585a69f55a203e36aab6f6a8dd3ce7ef154f65d1dc11120bf/products/docs/pages/component-library/default-components/all-about-ferns.pdf" width="100%" height="500px" />
  </Tab>

  <Tab title="HTML">
    ```html
    <iframe src="../default-components/all-about-ferns.pdf" width="100%" height="500px" style={{ border: 'none', borderRadius: '0.5rem' }} />
    ```
  </Tab>
</Tabs>

## 视频

### 本地视频

您可以使用 HTML `<video>` 标签在文档中嵌入视频。这使您能够控制视频播放设置，如自动播放、循环播放和静音。不要使用 `<embed>` 元素，因为它的浏览器支持不一致。

<Warning>
  `.mdx` files use JSX syntax, not pure HTML. Attributes for HTML elements like `<video>` and `<iframe>` that are embedded in `.mdx` pages must be written in `camelCase` rather than lowercase. For example, use `autoPlay` instead of `autoplay`.
</Warning>

<Tabs>
  <Tab title="渲染的视频">
    <video src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/a0b4e3e7d951a5f70c0374af3d4b7cd49c4c24df13dc54407f543b906149689d/products/docs/pages/component-library/writing-content/embed-fern-waving.mp4" width="854" height="480" autoPlay loop muted controls />
  </Tab>

  <Tab title="HTML">
    ```html
    <video
        src="path/to/your/video.mp4"
        poster="path/to/your/thumbnail.png"
        width="854"
        height="480"
        autoPlay
        loop
        playsInline
        muted
        controls
    >
    </video>
    ```
  </Tab>
</Tabs>

您也可以将视频包装在容器 div 中以进行额外的样式设置：

```html
<div class="card-video">
    <video
        src="path/to/your/video.mp4"
        poster="path/to/your/thumbnail.png"
        width="854"
        height="480"
        autoPlay
        loop
        playsInline
        muted
        controls
    >
    </video>
</div>
```

常见视频属性：

| 属性                 | 描述                               |
| ------------------ | -------------------------------- |
| `src`              | 视频文件的 URL 或路径                    |
| `poster`           | 在视频加载期间或用户点击播放之前显示的预览图像的 URL 或路径 |
| `width` 和 `height` | 视频播放器的尺寸                         |
| `autoPlay`         | 视频自动开始播放                         |
| `loop`             | 视频完成后重复播放                        |
| `playsInline`      | 视频在移动设备上内联播放而不是全屏播放              |
| `muted`            | 视频播放时无声音                         |
| `controls`         | 显示视频播放器控件（播放/暂停、音量等）             |

<Note>
  有关 HTML 视频元素及其属性的更多详细信息，请参阅 [MDN 关于 video 元素的文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)。
</Note>

### 嵌入 YouTube 或 Loom 视频

您可以使用 `<iframe>` 元素从 YouTube、Loom、Vimeo 和其他流媒体平台嵌入视频。

<Warning>
  `.mdx` 文件使用 JSX 语法，而不是纯 HTML。在 `.mdx` 页面中嵌入的 HTML 元素（如 `<video>` 和 `<iframe>`）的属性必须用 `camelCase` 而不是小写来编写。例如，使用 `autoPlay` 而不是 `autoplay`。
</Warning>

<Tabs>
  <Tab title="渲染的 Loom 视频">
    <iframe src="https://www.loom.com/embed/2e7f038de6894c69bf9c0d2525b0ad7f?sid=8bb327d2-8ba6-413c-a832-8d80282ad527" width="100%" height="450px" frameBorder="0" allowFullScreen />
  </Tab>

  <Tab title="Loom 视频语法">
    ```mdx
    <iframe
      src="https://www.loom.com/embed/2e7f038de6894c69bf9c0d2525b0ad7f?sid=8bb327d2-8ba6-413c-a832-8d80282ad527"
      width="100%"
      height="450px"
      frameBorder="0"
      allowFullScreen
    ></iframe>
    ```
  </Tab>
</Tabs>

请参阅 ElevenLabs 文档中相应文档页面上[渲染效果](https://elevenlabs.io/docs/conversational-ai/guides/integrations/zendesk#demo-video)的示例。

## LaTeX

Fern 支持 [LaTeX](https://www.latex-project.org/) 数学方程式。要使用 LaTeX，请将您的内联数学方程式用 `$` 包围。例如，`$(x^2 + y^2 = z^2)$` 将渲染为 $x^2 + y^2 = z^2$。

对于显示数学方程式，请将方程式用 `$$` 包围。例如：

```latex
$$
% \f is defined as #1f(#2) using the macro
\f\relax{x} = \int_{-\infty}^\infty
    \f\hat\xi\,e^{2 \pi i \xi x}
    \,d\xi
$$
```

$$
% \f is defined as #1f(#2) using the macro
\f\relax{x} = \int_{-\infty}^\infty
    \f\hat\xi\,e^{2 \pi i \xi x}
    \,d\xi
$$

### 显示字面美元符号

包含美元金额（如价格、预算或成本）的文本可能会意外渲染为数学方程式。要显示字面美元符号，请用反斜杠（`\`）转义它们：

<div>
  <div>
    不转义：产品成本 $10，运费为 $5

    转义：产品成本 \$10，运费为 \$5
  </div>
</div>

```markdown Markdown wordWrap
不转义：产品成本 $10，运费为 $5
转义：产品成本 \$10，运费为 \$5
```

## 图表

Fern 支持使用 [Mermaid](https://mermaid.js.org/) 在 Markdown 中创建图表。Mermaid 提供各种图表，包括流程图、实体关系模型和甘特图。要在 Markdown 文件中包含 Mermaid 图表，请创建一个标记为 `mermaid` 的代码块。

````markdown
```mermaid
erDiagram
    CUSTOMER ||--o{ PLANT-ORDER : places
    PLANT-ORDER ||--|{ PLANT-ID : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
````

```mermaid
erDiagram
    CUSTOMER ||--o{ PLANT-ORDER : places
    PLANT-ORDER ||--|{ PLANT-ID : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```