Markdown Features
Links & Images

Links and Images

Add hyperlinks, images, and other media to your markdown documents.

Links

Basic Links

Create links using [text](url):

[Visit MD Editor](https://mdedit.ai)
[GitHub](https://github.com)

Visit MD Editor (opens in a new tab) GitHub (opens in a new tab)

Links with Titles

Add a title that appears on hover:

[MD Editor](https://mdedit.ai "The best markdown editor")

MD Editor (opens in a new tab)

Reference-Style Links

Create reusable link references:

[Link 1][ref1]
[Link 2][ref2]
 
[ref1]: https://example.com "Example site"
[ref2]: https://another.com "Another site"

Link 1 (opens in a new tab) Link 2 (opens in a new tab)

Automatic Links

URLs are automatically converted to links:

https://mdedit.ai

https://mdedit.ai (opens in a new tab)

Email Links

Email addresses wrapped in angle brackets become clickable links:

<hello@mdedit.ai>

This will render as a clickable email link.

Images

Basic Images

Add images using ![alt text](url):

![MD Editor Logo](https://mdedit.ai/logo.png)

Images with Titles

![Logo](https://mdedit.ai/logo.png "MD Editor Logo")

Reference-Style Images

![Alt text][image-ref]
 
[image-ref]: https://mdedit.ai/logo.png "Logo"

Image Sizing

Use HTML for more control over image size:

<img src="https://mdedit.ai/logo.png" alt="Logo" width="200" height="100" />

Videos

MD Editor supports HTML5 video embedding:

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  Your browser doesn't support video.
</video>

Common Video Attributes

<video controls autoplay loop muted width="100%">
  <source src="demo.mp4" type="video/mp4">
</video>

GitHub Gists

Embed GitHub Gists by simply linking to them:

https://gist.github.com/username/gist-id

MD Editor will automatically render the gist with syntax highlighting.

Linking to Headings

Link to headings in the same document using anchor links:

[Go to Links Section](#links)
[Go to Images Section](#images)

Go to Links Section Go to Images Section

Opening Links in New Tab

Use HTML to open links in a new tab:

<a href="https://mdedit.ai" target="_blank">Open in new tab</a>
Open in new tab

Combining Links and Images

Create clickable images:

[![Alt text](image-url)](link-url)

Example:

[![MD Editor](https://mdedit.ai/logo.png)](https://mdedit.ai)

Asset Management

MD Editor provides powerful asset management features:

  • Local Assets: Reference images and videos stored with your document
  • Private URLs: Automatic resolution of private asset URLs (S3, etc.)
  • Asset Optimization: Automatic lazy loading and optimization
  • Preview Support: See assets in both editor and preview modes

Using Local Assets

![Local Image](assets/my-image.png)
<video controls src="assets/my-video.mp4"></video>

Assets are automatically managed and synced with your documents.

Visual Media Management in MD Editor

MD Editor provides a powerful visual interface for managing images and videos in your markdown documents.

Media Import Dialog

Instead of manually typing image syntax, you can use the Media Import dialog to:

  • Import from local files: Drag and drop or browse for images and videos
  • Import from URL: Paste a URL to embed external media
  • Search stock media: Find free images from Giphy, Unsplash, or Pixabay
  • Generate with AI: Create custom images using AI image generation

Media Import Dialog

To access the Media Import dialog:

  1. Click on the image icon in the toolbar
  2. Or use the keyboard shortcut to insert media
  3. Choose your preferred import method
  4. The markdown syntax will be automatically inserted at your cursor position

This visual approach makes it easy to add rich media to your documents without memorizing syntax or managing file paths.

ListsTables