{"id":28573672,"url":"https://github.com/remarkjs/remark-images","last_synced_at":"2026-03-15T11:09:52.854Z","repository":{"id":46248986,"uuid":"173152783","full_name":"remarkjs/remark-images","owner":"remarkjs","description":"plugin to add a simpler image syntax","archived":false,"fork":false,"pushed_at":"2024-09-19T11:57:27.000Z","size":90,"stargazers_count":40,"open_issues_count":0,"forks_count":3,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-06-01T03:19:25.504Z","etag":null,"topics":["image","mdast","remark","remark-plugin"],"latest_commit_sha":null,"homepage":"https://remark.js.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/remarkjs.png","metadata":{"funding":{"github":"unifiedjs","open_collective":"unified"},"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-28T17:04:52.000Z","updated_at":"2025-04-12T12:34:58.000Z","dependencies_parsed_at":"2024-06-18T15:31:30.935Z","dependency_job_id":"ff3060b5-4ff2-46ca-9c37-3ef623d752d7","html_url":"https://github.com/remarkjs/remark-images","commit_stats":{"total_commits":64,"total_committers":4,"mean_commits":16.0,"dds":0.0625,"last_synced_commit":"5dc2f28bfae13c033312c39bd3c8c6d1edc1860b"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkjs%2Fremark-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkjs%2Fremark-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkjs%2Fremark-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkjs%2Fremark-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remarkjs","download_url":"https://codeload.github.com/remarkjs/remark-images/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkjs%2Fremark-images/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259152784,"owners_count":22813227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","mdast","remark","remark-plugin"],"created_at":"2025-06-10T21:18:59.334Z","updated_at":"2026-03-15T11:09:47.801Z","avatar_url":"https://github.com/remarkjs.png","language":"JavaScript","funding_links":["https://github.com/sponsors/unifiedjs","https://opencollective.com/unified"],"categories":[],"sub_categories":[],"readme":"# remark-images\n\n[![Build][build-badge]][build]\n[![Coverage][coverage-badge]][coverage]\n[![Downloads][downloads-badge]][downloads]\n[![Size][size-badge]][size]\n[![Sponsors][sponsors-badge]][collective]\n[![Backers][backers-badge]][collective]\n[![Chat][chat-badge]][chat]\n\n**[remark][]** plugin to add a simpler image syntax.\n\n## Contents\n\n* [What is this?](#what-is-this)\n* [When should I use this?](#when-should-i-use-this)\n* [Install](#install)\n* [Use](#use)\n* [API](#api)\n  * [`defaultImageExtensions`](#defaultimageextensions)\n  * [`unified().use(remarkImages[, options])`](#unifieduseremarkimages-options)\n  * [`Options`](#options)\n* [Syntax](#syntax)\n* [Syntax tree](#syntax-tree)\n* [Types](#types)\n* [Compatibility](#compatibility)\n* [Security](#security)\n* [Related](#related)\n* [Contribute](#contribute)\n* [License](#license)\n\n## What is this?\n\nThis package is a [unified][] ([remark][]) plugin to add a simpler image syntax.\n\n## When should I use this?\n\nImages are [notoriously unintuitive][tweet] in markdown.\nThis projects adds a different way to include images: by pasting in a URL or\npath to them (such as `./image.jpg`).\nThe behavior added by this plugin is nice when you’re authoring your own\nmarkdown and are sure that you’re explaining what happens in images in\nsurrounding prose (as you can’t add alt text with this).\n\nAnother plugin, [`remark-unwrap-images`][remark-unwrap-images], could be useful\nto unwrap images on their own in a paragraph.\n\n## Install\n\nThis package is [ESM only][esm].\nIn Node.js (version 16+), install with [npm][]:\n\n```sh\nnpm install remark-images\n```\n\nIn Deno with [`esm.sh`][esmsh]:\n\n```js\nimport remarkImages from 'https://esm.sh/remark-images@4'\n```\n\nIn browsers with [`esm.sh`][esmsh]:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import remarkImages from 'https://esm.sh/remark-images@4?bundle'\n\u003c/script\u003e\n```\n\n## Use\n\nSay we have the following file `example.md`:\n\n```markdown\nOriginal plates from Clyde Tombaugh’s discovery of Pluto:\n\nhttps://upload.wikimedia.org/wikipedia/en/c/c6/Pluto_discovery_plates.png\n```\n\n…and a module `example.js`:\n\n```js\nimport {remark} from 'remark'\nimport remarkImages from 'remark-images'\nimport {read} from 'to-vfile'\n\nconst file = await remark()\n  .use(remarkImages)\n  .process(await read('example.md'))\n\nconsole.log(String(file))\n```\n\n…then running `node example.js` yields:\n\n```markdown\nOriginal plates from Clyde Tombaugh’s discovery of Pluto:\n\n[![](https://upload.wikimedia.org/wikipedia/en/c/c6/Pluto_discovery_plates.png)](https://upload.wikimedia.org/wikipedia/en/c/c6/Pluto_discovery_plates.png)\n```\n\n## API\n\nThis package exports the identifier\n[`defaultImageExtensions`][api-default-image-extensions].\nThe default export is [`remarkImages`][api-remark-images].\n\n### `defaultImageExtensions`\n\nExtensions recognized as images by default (`Array\u003cstring\u003e`).\nCurrently `['avif', 'gif', 'jpeg', 'jpg', 'png', 'svg', 'webp']`.\n\n### `unified().use(remarkImages[, options])`\n\nAdd a simpler image syntax.\n\n###### Parameters\n\n* `options` ([`Options`][api-options], optional)\n  — configuration\n\n###### Returns\n\nTransform ([`Transformer`][unified-transformer]).\n\n### `Options`\n\nConfiguration (TypeScript type).\n\n###### Fields\n\n* `imageExtensions` (`Array\u003cstring\u003e`, default:\n  [`defaultImageExtensions`][api-default-image-extensions])\n  — file extensions (without dot) to treat as images\n* `link` (`boolean`, default: `true`)\n  — whether to wrap the image with a link to it\n\n## Syntax\n\nThis plugin looks for URLs and paths, on their own, that end in an image\nextension.\nIf they occur inside a link already, then only an image is created.\nIf they instead do not occur in a link, the image is also linked.\n\nSome examples of URLs and paths are:\n\n* `https://example.com/image.jpg`\n* `/image.jpg`\n* `./image.jpg`\n* `../image.jpg`\n\n## Syntax tree\n\nThis plugin adds mdast [`Image`][mdast-image] and [`Link`][mdast-link] nodes to\nthe syntax tree.\nThese are the same nodes that represent images through `![](url)` and links\nthrough `[text](url)` syntax.\n\n## Types\n\nThis package is fully typed with [TypeScript][].\nIt exports the additional type [`Options`][api-options].\n\n## Compatibility\n\nProjects maintained by the unified collective are compatible with maintained\nversions of Node.js.\n\nWhen we cut a new major release, we drop support for unmaintained versions of\nNode.\nThis means we try to keep the current release line, `remark-images@^4`,\ncompatible with Node.js 16.\n\nThis plugin works with `unified` version 3+ and `remark` version 4+.\n\n## Security\n\nAlthough this plugin should be safe to use, always be careful with user input.\nFor example, it’s possible to hide JavaScript inside images (such as GIFs,\nWebPs, and SVGs).\nUser provided images open you up to a [cross-site scripting (XSS)][wiki-xss]\nattack.\n\nThis may become a problem if the markdown later transformed to\n**[rehype][]** (**[hast][]**) or opened in an unsafe markdown viewer.\n\n## Related\n\n* [`remark-unwrap-images`][remark-unwrap-images]\n  — remove the wrapping paragraph for images\n* [`remark-embed-images`](https://github.com/remarkjs/remark-embed-images)\n  — embed local images as data URIs\n\n## Contribute\n\nSee [`contributing.md`][contributing] in [`remarkjs/.github`][health] for ways\nto get started.\nSee [`support.md`][support] for ways to get help.\n\nThis project has a [code of conduct][coc].\nBy interacting with this repository, organization, or community you agree to\nabide by its terms.\n\n## License\n\n[MIT][license] © [John Otander][author]\n\n\u003c!-- Definitions --\u003e\n\n[build-badge]: https://github.com/remarkjs/remark-images/workflows/main/badge.svg\n\n[build]: https://github.com/remarkjs/remark-images/actions\n\n[coverage-badge]: https://img.shields.io/codecov/c/github/remarkjs/remark-images.svg\n\n[coverage]: https://codecov.io/github/remarkjs/remark-images\n\n[downloads-badge]: https://img.shields.io/npm/dm/remark-images.svg\n\n[downloads]: https://www.npmjs.com/package/remark-images\n\n[size-badge]: https://img.shields.io/bundlejs/size/remark-images\n\n[size]: https://bundlejs.com/?q=remark-images\n\n[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg\n\n[backers-badge]: https://opencollective.com/unified/backers/badge.svg\n\n[collective]: https://opencollective.com/unified\n\n[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg\n\n[chat]: https://github.com/remarkjs/remark/discussions\n\n[npm]: https://docs.npmjs.com/cli/install\n\n[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c\n\n[esmsh]: https://esm.sh\n\n[health]: https://github.com/remarkjs/.github\n\n[contributing]: https://github.com/remarkjs/.github/blob/main/contributing.md\n\n[support]: https://github.com/remarkjs/.github/blob/main/support.md\n\n[coc]: https://github.com/remarkjs/.github/blob/main/code-of-conduct.md\n\n[license]: license\n\n[author]: https://johno.com\n\n[hast]: https://github.com/syntax-tree/hast\n\n[mdast-image]: https://github.com/syntax-tree/mdast#image\n\n[mdast-link]: https://github.com/syntax-tree/mdast#link\n\n[rehype]: https://github.com/rehypejs/rehype\n\n[remark]: https://github.com/remarkjs/remark\n\n[remark-unwrap-images]: https://github.com/remarkjs/remark-unwrap-images\n\n[tweet]: https://twitter.com/gruber/status/1246489863932821512\n\n[typescript]: https://www.typescriptlang.org\n\n[unified]: https://github.com/unifiedjs/unified\n\n[unified-transformer]: https://github.com/unifiedjs/unified#transformer\n\n[wiki-xss]: https://en.wikipedia.org/wiki/Cross-site_scripting\n\n[api-default-image-extensions]: #defaultimageextensions\n\n[api-options]: #options\n\n[api-remark-images]: #unifieduseremarkimages-options\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremarkjs%2Fremark-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremarkjs%2Fremark-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremarkjs%2Fremark-images/lists"}