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
40 changes: 40 additions & 0 deletions fern/products/docs/pages/writing-content/markdown.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Images

In Fern documentation, you can add images using standard Markdown syntax or HTML image tags. Images provide visual aids to help users better understand concepts, follow tutorials, or see examples of the interface.

## Basic Image Syntax

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

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

## Image Options

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

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

### Dark Mode Support
For images that need different versions in light and dark modes:

```html
<img src="./light-image.png" alt="Light mode image" className="dark:hidden" />
<img src="./dark-image.png" alt="Dark mode image" className="hidden dark:block" />
```

## Best Practices

- Use descriptive alt text for accessibility
- Keep image file sizes optimized
- Provide appropriate context around images
- Use consistent image dimensions within a document
- Consider dark mode compatibility when relevant