编写内容

Markdown 中的富媒体

以 Markdown 格式查看

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

图像

您可以使用本地存储的图像或 URL 在 Markdown 页面中包含图像。使用 Markdown 语法 或 <img> HTML 标签 来插入图像。不要使用 <embed> 元素，因为它的浏览器支持不一致。

图像路径

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

1<!-- 相对于页面位置 -->
2![Alt text](../../assets/images/logo.png "可选标题")
3
4<!-- 相对于 fern 文件夹根目录 -->
5![Alt text](/assets/images/logo.png "可选标题")

常见图像属性：

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

有关 HTML 图像元素及其属性的更多详细信息，请参阅 MDN 关于 img 元素的文档。

PDF

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

视频

本地视频

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

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

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

1<div class="card-video">
2    <video
3        src="path/to/your/video.mp4"
4        poster="path/to/your/thumbnail.png"
5        width="854"
6        height="480"
7        autoPlay
8        loop
9        playsInline
10        muted
11        controls
12    >
13    </video>
14</div>

常见视频属性：

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

有关 HTML 视频元素及其属性的更多详细信息，请参阅 MDN 关于 video 元素的文档。

嵌入 YouTube 或 Loom 视频

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

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

请参阅 ElevenLabs 文档中相应文档页面上渲染效果的示例。

LaTeX

Fern 支持 LaTeX 数学方程式。要使用 LaTeX，请将您的内联数学方程式用 $ 包围。例如，$(x^2 + y^2 = z^2)$ 将渲染为 x2+y2=z2x^2 + y^2 = z^2。

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

1$$
2% \f is defined as #1f(#2) using the macro
3\f\relax{x} = \int_{-\infty}^\infty
4    \f\hat\xi\,e^{2 \pi i \xi x}
5    \,d\xi
6$$
\fx=∫−∞∞\fξ^ e2πiξx dξ% \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

显示字面美元符号

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

不转义：产品成本 10，运费为10，运费为 5

转义：产品成本 $10，运费为 $5

Markdown
1不转义：产品成本 $10，运费为 $5
2转义：产品成本 \$10，运费为 \$5

图表

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

1```mermaid
2erDiagram
3    CUSTOMER ||--o{ PLANT-ORDER : places
4    PLANT-ORDER ||--|{ PLANT-ID : contains
5    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
6```