Skip to content
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions fern/products/docs/pages/writing-content/markdown.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
# Images

Images in Fern documentation can be added using standard Markdown syntax or HTML tags.

## Basic Image Syntax

### Markdown
```md
![Alt text](./path/to/image.png)
```

### HTML
```html
<img src="./path/to/image.png" alt="Alt text" />
```

## Image Options

### Preventing Zoom
To prevent an image from being zoomable, add the `noZoom` attribute:

```html
<img src="./path/to/image.png" alt="Alt text" noZoom />
```

### Classes and Styling
Add CSS classes using the `className` attribute:

```html
<img
src="./path/to/image.png"
alt="Alt text"
className="custom-class"
/>
```

## Best Practices

- Always include descriptive alt text for accessibility
- Use relative paths starting with `./` or `../`
- Optimize images for web before adding to docs
- Consider if zoom functionality is needed for each image
- Keep image file sizes reasonable for fast loading

## Examples

A zoomable image (default behavior):
```html
<img src="./examples/chart.png" alt="Data visualization chart" />
```

A non-zoomable image:
```html
<img src="./examples/icon.svg" alt="Navigation icon" noZoom />
```

A styled image with multiple attributes:
```html
<img
src="./examples/diagram.png"
alt="Architecture diagram"
className="border rounded-lg"
noZoom
/>
```