@mirrordown/mdit-unwrap-images

Part of Mirrordown — a suite of markdown syntax extensions for the unified and markdown-it ecosystems.

A markdown-it plugin for the unwrap-images syntax extension.

Overview

The unwrap-images plugin removes the <p> wrapper that Markdown adds around standalone images, allowing images to render as direct block-level elements. Images inside links are also unwrapped.

Before:

<p><img src="photo.jpg" alt="A photo" /></p>

After:

<img src="photo.jpg" alt="A photo" />

Syntax

Any image that stands alone on a paragraph — with no other text or inline content — is unwrapped:

![An example image](https://picsum.photos/400/200)

Images mixed with text are **not** unwrapped:

Here is an inline image: ![icon](https://picsum.photos/16/16) within a sentence.

[!NOTE] This is a rehype plugin (rehype-*), not a remark plugin. Add it after remarkRehype in your pipeline.

Install

npm install @mirrordown/mdit-unwrap-images

Standalone

import MarkdownIt from "markdown-it";
import { unwrapImages } from "@mirrordown/mdit-unwrap-images";

const md = new MarkdownIt().use(unwrapImages);

VitePress

// .vitepress/config.ts
import { defineConfig } from "vitepress";
import { unwrapImages } from "@mirrordown/mdit-unwrap-images";

export default defineConfig({
  markdown: {
    config: (md) => md.use(unwrapImages)
  }
});

Documentation

Full documentation, more examples, and configuration options: github.com/mirrordown/mirrordown (dedicated docs site coming soon).

License

MIT © Drake Costa