diff --git a/index.js b/index.js index 9486c50..98e1b96 100644 --- a/index.js +++ b/index.js @@ -13,7 +13,7 @@ const containsImage = 2 const containsOther = 3 /** - * Plugin to to remove the wrapping paragraph for images. + * Plugin to remove the wrapping paragraph for images. * * @type {import('unified').Plugin} */ diff --git a/readme.md b/readme.md index a65c139..26ccba1 100644 --- a/readme.md +++ b/readme.md @@ -8,56 +8,100 @@ [![Backers][backers-badge]][collective] [![Chat][chat-badge]][chat] -[**remark**][remark] plugin to remove the wrapping paragraph for images. +**[remark][]** plugin to remove the wrapping paragraph for images. -## Note! +## Contents -This plugin is ready for the new parser in remark -([`remarkjs/remark#536`](https://github.com/remarkjs/remark/pull/536)). -No change is needed: it works exactly the same now as it did before! +* [What is this?](#what-is-this) +* [When should I use this?](#when-should-i-use-this) +* [Install](#install) +* [Use](#use) +* [API](#api) +* [Types](#types) +* [Compatibility](#compatibility) +* [Security](#security) +* [Related](#related) +* [Contribute](#contribute) +* [License](#license) -## Install +## What is this? + +This package is a [unified][] ([remark][]) plugin that searches for paragraphs +which contain only images (possibly in links) and nothing else, and then remove +those surrounding paragraphs. -This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c): -Node 12+ is needed to use it and it must be `import`ed instead of `require`d. +**unified** is a project that transforms content with abstract syntax trees +(ASTs). +**remark** adds support for markdown to unified. +**mdast** is the markdown AST that remark uses. +This is a remark plugin that transforms mdast. -[npm][]: +## When should I use this? + +This project can make it simpler to style images with CSS, for example +displaying them at the full available width, because paragraph styles no longer +interfere with them. + +## Install + +This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). +In Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]: ```sh npm install remark-unwrap-images ``` +In Deno with [Skypack][]: + +```js +import remarkUnwrapImages from 'https://cdn.skypack.dev/remark-unwrap-images@3?dts' +``` + +In browsers with [Skypack][]: + +```html + +``` + ## Use -Say we have the following file, `example.md`. -Imagine section titles and URLs a bit longer though. +Say we have the following file `example.md`. ```markdown +# Hello world + +Lorem ipsum. + ![hi](there.png) ``` -And our module, `example.js`, looks as follows: +And our module `example.js` looks as follows: ```js -import {readSync} from 'to-vfile' +import {read} from 'to-vfile' import {remark} from 'remark' import remarkHtml from 'remark-html' import remarkUnwrapImages from 'remark-unwrap-images' -const file = readSync('example.md') +main() -remark() - .use(remarkUnwrapImages) - .use(remarkHtml) - .process(file) - .then((file) => { - console.log(String(file)) - }) +async function main() { + const file = await remark() + .use(remarkUnwrapImages) + .use(remarkHtml) + .process(await read('example.md')) + + console.log(String(file)) +} ``` -Now, running `node example` yields: +Now running `node example.js` yields: ```html +

Hello world

+

Lorem ipsum.

hi ``` @@ -68,15 +112,35 @@ The default export is `remarkUnwrapImages`. #### `unified().use(remarkUnwrapImages)` -Remove the wrapping paragraph for images. -Supports multiple images, white space around images, and images in links as -well. +Plugin to remove the wrapping paragraph for images. +There are no options. + +## Types + +This package is fully typed with [TypeScript][]. +There are no extra exported types. + +## Compatibility + +Projects maintained by the unified collective are compatible with all maintained +versions of Node.js. +As of now, that is Node.js 12.20+, 14.14+, and 16.0+. +Our projects sometimes work with older versions, but this is not guaranteed. + +This plugin works with `unified` version 6+ and `remark` version 7+. ## Security -Use of `remark-unwrap-images` does not involve [**rehype**][rehype] -([**hast**][hast]) or user content, it only removes some existing nodes, so -there are no openings for [cross-site scripting (XSS)][xss] attacks. +Use of `remark-unwrap-images` does not involve **[rehype][]** (**[hast][]**) or +user content, it only removes some existing nodes, so there are no openings for +[cross-site scripting (XSS)][xss] attacks. + +## Related + +* [`remark-images`](https://github.com/remarkjs/remark-images) + — add a simpler image syntax +* [`remark-embed-images`](https://github.com/remarkjs/remark-embed-images) + — embed local images as data URIs, inlining files as base64-encoded values ## Contribute @@ -122,6 +186,8 @@ abide by its terms. [npm]: https://docs.npmjs.com/cli/install +[skypack]: https://www.skypack.dev + [health]: https://github.com/remarkjs/.github [contributing]: https://github.com/remarkjs/.github/blob/HEAD/contributing.md @@ -134,8 +200,12 @@ abide by its terms. [remark]: https://github.com/remarkjs/remark +[unified]: https://github.com/unifiedjs/unified + [xss]: https://en.wikipedia.org/wiki/Cross-site_scripting +[typescript]: https://www.typescriptlang.org + [rehype]: https://github.com/rehypejs/rehype [hast]: https://github.com/syntax-tree/hast