Writing content

Rich media in Markdown

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 or the <img> HTML tag 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.

1<!-- Relative to page location -->
2![Alt text](../../assets/images/logo.png "Optional title")
3
4<!-- Relative to fern folder root -->
5![Alt text](/assets/images/logo.png "Optional title")

Common image attributes:

AttributeDescription
srcURL or path to the image file
altAlternative text for accessibility
titleTooltip text shown on hover
width and heightDimensions of the image (px)
noZoomDisables image zoom functionality

For more details about the HTML image element and its attributes, see the MDN documentation on the img element.

PDFs

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

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.

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

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

Common video attributes:

AttributeDescription
srcURL or path to the video file
width and heightDimensions of the video player
autoPlayVideo starts playing automatically
loopVideo repeats when finished
playsInlineVideo plays inline on mobile devices instead of fullscreen
mutedVideo plays without sound
controlsShows 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.

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.

See an example of how it renders on the corresponding docs page from the ElevenLabs documentation.

LaTeX

Fern supports LaTeX math equations. To use LaTeX, wrap your inline math equations in $. For example, $(x^2 + y^2 = z^2)$ will render x2+y2=z2x^2 + y^2 = z^2.

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

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

Diagrams

Fern supports creating diagrams within your Markdown using Mermaid. 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.

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