> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Rich media in Markdown

> Embed images, videos, PDFs, LaTeX equations, and diagrams in your Fern documentation.

Enhance your documentation with rich media content including images, videos, PDFs, mathematical equations, and diagrams.

## Images

You can use locally stored images or URLs to include images in your Markdown pages. Use either [Markdown syntax](https://www.markdownguide.org/basic-syntax/#images-1) or the [`<img>` HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) to insert the image. Don't use the `<embed>` element, as it has inconsistent browser support.

#### Image paths

You can reference images using paths relative to the page's location (using `./` or `../`) or relative to the `fern` folder root (using `/`). For example, an image at `fern/assets/images/logo.png` can be referenced from any page as `/assets/images/logo.png`.

#### Markdown

```markdown
<!-- Relative to page location -->
![Alt text](../../assets/images/logo.png "Optional title")

<!-- Relative to fern folder root -->
![Alt text](/assets/images/logo.png "Optional title")
```

#### HTML

```html
<!-- Relative to page location -->
<img src="../../assets/images/logo.png" width="500px" height="auto" />

<!-- Relative to fern folder root -->
<img src="/assets/images/logo.png" width="500px" height="auto" />
```

Common image attributes:

| Attribute            | Description                        |
| -------------------- | ---------------------------------- |
| `src`                | URL or path to the image file      |
| `alt`                | Alternative text for accessibility |
| `title`              | Tooltip text shown on hover        |
| `width` and `height` | Dimensions of the image (px)       |
| `noZoom`             | Disables image zoom functionality  |

For more details about the HTML image element and its attributes, see the [MDN documentation on the img element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img).

## PDFs

Embed PDFs using the `<iframe>` element. Don't use the `<embed>` element, as it has inconsistent browser support.

#### Rendered PDF

#### PDF syntax

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

## Videos

### Local videos

You can embed videos in your documentation using the HTML `<video>` tag. This gives you control over video playback settings like autoplay, looping, and muting. Don't use the `<embed>` element, as it has inconsistent browser support.

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

#### Rendered video

#### Video syntax

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

You can also wrap the video in a container div for additional styling:

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

Common video attributes:

| Attribute            | Description                                                                                  |
| -------------------- | -------------------------------------------------------------------------------------------- |
| `src`                | URL or path to the video file                                                                |
| `poster`             | URL or path to a preview image shown while the video is loading or before the user hits play |
| `width` and `height` | Dimensions of the video player                                                               |
| `autoPlay`           | Video starts playing automatically                                                           |
| `loop`               | Video repeats when finished                                                                  |
| `playsInline`        | Video plays inline on mobile devices instead of fullscreen                                   |
| `muted`              | Video plays without sound                                                                    |
| `controls`           | Shows video player controls (play/pause, volume, etc.)                                       |

For more details about the HTML video element and its attributes, see the [MDN documentation on the video element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).

### Embed YouTube or Loom videos

You can embed videos from YouTube, Loom, Vimeo, and other streaming platforms using an `<iframe>` element.

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

#### Rendered Loom video

#### Loom video syntax

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

See an example of [how it renders](https://elevenlabs.io/docs/conversational-ai/guides/integrations/zendesk#demo-video) on the corresponding docs page from the ElevenLabs documentation.

## External sites

You can embed any external web page in your documentation using an `<iframe>`.

If the target site sets headers like `X-Frame-Options` or a restrictive `Content-Security-Policy`, the browser blocks the embed. Verify that the site you want to embed allows being framed.

#### Rendered external site

#### External site syntax

```mdx
<iframe
  src="https://en.wikipedia.org/wiki/Fern"
  style="width: 100%; height: 500px; border: none; border-radius: 8px;"
/>
```

When [embedding a Fern Docs site](/learn/docs/customization/embedded-mode) inside another application, append `?embedded=true` to the URL to hide the header and footer.

## LaTeX

Fern supports [LaTeX](https://www.latex-project.org/) math equations. To use LaTeX, wrap your inline math equations in `$`. For example, `$(x^2 + y^2 = z^2)$` will render $x^2 + y^2 = z^2$.

For display math equations, wrap the equation in `$$`. For example:

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

### Displaying literal dollar signs

Text containing dollar amounts (like prices, budgets, or costs) may unintentionally render as math equations. To display literal dollar signs, escape them with a backslash (`\`):

Without escaping: The product costs $10 and shipping is $5

With escaping: The product costs \$10 and shipping is \$5

**`Markdown`**

```markdown Markdown wordWrap
Without escaping: The product costs $10 and shipping is $5
With escaping: The product costs \$10 and shipping is \$5
```

## Diagrams

Fern supports creating diagrams within your Markdown using [Mermaid](https://mermaid.js.org/). Mermaid offers a variety of diagrams, including flowcharts, entity-relationship models, and Gantt charts. To include a Mermaid diagram in your Markdown file, create a codeblock marked with `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
```

> Embed images, videos, PDFs, LaTeX equations, and diagrams in your Fern documentation.