Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
remark-images
Advanced tools
remark plugin to add a simpler image syntax.
This package is a unified (remark) plugin to add a simpler image syntax.
Images are notoriously unintuitive 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-images
, could be useful
to unwrap images on their own in a paragraph.
This package is ESM only. In Node.js (version 16+), install with npm:
npm install remark-images
In Deno with esm.sh
:
import remarkImages from 'https://esm.sh/remark-images@4'
In browsers with esm.sh
:
<script type="module">
import remarkImages from 'https://esm.sh/remark-images@4?bundle'
</script>
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)
This package exports the identifier
defaultImageExtensions
.
The default export is remarkImages
.
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.
options
(Options
, optional)
— configurationTransform (Transformer
).
Options
Configuration (TypeScript type).
imageExtensions
(Array<string>
, default:
defaultImageExtensions
)
— file extensions (without dot) to treat as imageslink
(boolean
, default: true
)
— whether to wrap the image with a link to itThis 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
This plugin adds mdast Image
and Link
nodes to
the syntax tree.
These are the same nodes that represent images through ![](url)
and links
through [text](url)
syntax.
This package is fully typed with TypeScript.
It exports the additional type Options
.
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+.
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) attack.
This may become a problem if the markdown later transformed to rehype (hast) or opened in an unsafe markdown viewer.
remark-unwrap-images
— remove the wrapping paragraph for imagesremark-embed-images
— embed local images as data URIsSee contributing.md
in remarkjs/.github
for ways
to get started.
See support.md
for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
FAQs
remark plugin to add a simpler image syntax
The npm package remark-images receives a total of 9,764 weekly downloads. As such, remark-images popularity was classified as popular.
We found that remark-images demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.