remark-images

!Buildbuild-badgebuild !Coveragecoverage-badgecoverage !Downloadsdownloads-badgedownloads !Sizesize-badgesize !Sponsorssponsors-badgecollective !Backersbackers-badgecollective !Chatchat-badgechat
remark plugin to add a simpler image syntax.

Contents

• What is this?
• When should I use this?
• Install
• Use
• API

*   [`defaultImageExtensions`](#defaultimageextensions)
*   [`unified().use(remarkImages[, options])`](#unifieduseremarkimages-options)
*   [`Options`](#options)

• Syntax
• Syntax tree
• Types
• Compatibility
• Security
• Related
• Contribute
• License

What is this?

This package is a unified (remark) plugin to add a simpler image syntax.

When should I use this?

Images are notoriously unintuitivetweet in markdown. This projects adds a different way to include images: by pasting in a URL or path to them (such as ./image.jpg). The behavior added by this plugin is nice when you’re authoring your own markdown and are sure that you’re explaining what happens in images in surrounding prose (as you can’t add alt text with this).
Another plugin, remark-unwrap-imagesremark-unwrap-images, could be useful to unwrap images on their own in a paragraph.

Install

This package is ESM onlyesm. In Node.js (version 16+), install with npm:

npm install remark-images

In Deno with esm.shesmsh:

import remarkImages from 'https://esm.sh/remark-images@4'

In browsers with esm.shesmsh:

<script type="module">
  import remarkImages from 'https://esm.sh/remark-images@4?bundle'
</script>

Use

Say we have the following file example.md:

Original plates from Clyde Tombaugh’s discovery of Pluto:

https://upload.wikimedia.org/wikipedia/en/c/c6/Pluto_discovery_plates.png

…and a module example.js:

import {remark} from 'remark'
import remarkImages from 'remark-images'
import {read} from 'to-vfile'

const file = await remark()
  .use(remarkImages)
  .process(await read('example.md'))

console.log(String(file))

…then running node example.js yields:

Original plates from Clyde Tombaugh’s discovery of Pluto:

[![](https://upload.wikimedia.org/wikipedia/en/c/c6/Pluto_discovery_plates.png)](https://upload.wikimedia.org/wikipedia/en/c/c6/Pluto_discovery_plates.png)

API

This package exports the identifier defaultImageExtensionsapi-default-image-extensions. The default export is remarkImagesapi-remark-images.

defaultImageExtensions

Extensions recognized as images by default (Array<string>). Currently ['avif', 'gif', 'jpeg', 'jpg', 'png', 'svg', 'webp'].

unified().use(remarkImages[, options])

Add a simpler image syntax.

Parameters

• options (Optionsapi-options, optional)

— configuration

Returns

Transform (Transformerunified-transformer).

Options

Configuration (TypeScript type).

Fields

• imageExtensions (Array<string>, default:

[`defaultImageExtensions`][api-default-image-extensions])
— file extensions (without dot) to treat as images

Syntax

This plugin looks for URLs and paths, on their own, that end in an image extension. If they occur inside a link already, then only an image is created. If they instead do not occur in a link, the image is also linked.
Some examples of URLs and paths are:

• https://example.com/image.jpg
• /image.jpg
• ./image.jpg
• ../image.jpg

Syntax tree

This plugin adds mdast Imagemdast-image and Linkmdast-link nodes to the syntax tree. These are the same nodes that represent images through ![](url) and links through [text](url) syntax.

Types

This package is fully typed with TypeScript. It exports the additional type Optionsapi-options.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.
When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, remark-images@^4, compatible with Node.js 16.
This plugin works with unified version 3+ and remark version 4+.

Security

Although this plugin should be safe to use, always be careful with user input. For example, it’s possible to hide JavaScript inside images (such as GIFs, WebPs, and SVGs). User provided images open you up to a cross-site scripting (XSS)wiki-xss attack.
This may become a problem if the markdown later transformed to rehype (hast) or opened in an unsafe markdown viewer.

Related

• remark-unwrap-imagesremark-unwrap-images

— remove the wrapping paragraph for images

• remark-embed-images

— embed local images as data URIs

Contribute

See contributing.mdcontributing in remarkjs/.githubhealth for ways to get started. See support.mdsupport for ways to get help.
This project has a code of conductcoc. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MITlicense © John Otanderauthor