Remark plugin to add ins element in markdown
npm install remark-insIf you find remark-ins useful in your projects, consider supporting my work.
Your sponsorship means a lot 💖
Be the first sponsor and get featured here and on my sponsor wall.
Thank you for supporting open source! 🙌
[![npm version][badge-npm-version]][url-npm-package]
[![npm downloads][badge-npm-download]][url-npm-package]
[![publish to npm][badge-publish-to-npm]][url-publish-github-actions]
[![code-coverage][badge-codecov]][url-codecov]
[![type-coverage][badge-type-coverage]][url-github-package]
[![typescript][badge-typescript]][url-typescript]
[![license][badge-license]][url-license]
This package is a [unified][unified] ([remark][remark]) plugin to add custom element in markdown.
[unified][unified] is a project that transforms content with abstract syntax trees (ASTs) using the new parser [micromark][micromark]. [remark][remark] adds support for markdown to unified. [mdast][mdast] is the Markdown Abstract Syntax Tree (AST) which is a specification for representing markdown in a syntax tree.
This plugin is a remark plugin that transforms the mdast.
remark-ins is useful if you want to add a element in markdown, which represents a range of text that has been added to a document.
You can easily create element with remark-ins.
This package is suitable for ESM only. In Node.js (version 16+), install with npm:
``bash`
npm install remark-ins
or
`bash`
yarn add remark-ins
#### use ++ around the content
Say we have the following file, example.md, which consists some flexible markers.
`markdown`
++inserted text++
And our module, example.js, looks as follows:
`javascript
import { read } from "to-vfile";
import remark from "remark";
import gfm from "remark-gfm";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import remarkIns from "remark-ins";
main();
async function main() {
const file = await remark()
.use(gfm)
.use(remarkIns)
.use(remarkRehype)
.use(rehypeStringify)
.process(await read("example.md"));
console.log(String(file));
}
`
Now, running node example.js yields:
` inserted texthtml`
Without remark-ins, you’d get:
` ++inserted text++html`
> [!CAUTION]
> The double plus signs must be adjacent to the content.\
> The content must be wrapped with double plus signs, not singular at any side.\
Here are some bad usage, and will not work.
`markdown
++text with bad wrapped+
+text with bad wrapped++
++ text with unwanted space++
++text with unwanted space ++
`
As of version ^1.1.0, remark-ins can handle also the syntax containing other markdown phrases like strong, emphasis, link etc. For example:
`
++inserted bold content++
++_inserted italic content_++
++inserted link++
`
`html`
inserted bold content
inserted italic content
There is no option for remark-ins.
`markdown
~~deleted content~~ and ++inserted content++
++inserted bold content++ and ++inserted bold content++
is going to produce as default:`html
deleted content
and
inserted content
inserted bold content
and
inserted bold content
Heading with inserted content
`You can use the ins syntax in the tables, headings, lists, blockquotes etc. For detailed examples, you can have a look at the test files in the github repo.
Syntax tree
This plugin only modifies the mdast (markdown abstract syntax tree) as explained.
Types
This package is fully typed with [TypeScript][url-typescript].
Compatibility
This plugin works with
unified version 6+ and remark version 7+. It is compatible with mdx version 2+.Security
Use of
remark-ins does not involve rehype (hast) or user content so there are no openings for cross-site scripting (XSS) attacks.My Plugins
I like to contribute the Unified / Remark / MDX ecosystem, so I recommend you to have a look my plugins.
$3
remark-flexible-code-titles
– Remark plugin to add titles or/and containers for the code blocks with customizable properties
- remark-flexible-containers
– Remark plugin to add custom containers with customizable properties in markdown
- remark-ins
– Remark plugin to add ins element in markdown
- remark-flexible-paragraphs
– Remark plugin to add custom paragraphs with customizable properties in markdown
- remark-flexible-markers
– Remark plugin to add custom mark element with customizable properties in markdown
- remark-flexible-toc
– Remark plugin to expose the table of contents via vfile.data or via an option reference
- remark-mdx-remove-esm
– Remark plugin to remove import and/or export statements (mdxjsEsm)$3
rehype-pre-language
– Rehype plugin to add language information as a property to pre element
- rehype-highlight-code-lines
– Rehype plugin to add line numbers to code blocks and allow highlighting of desired code lines
- rehype-code-meta
– Rehype plugin to copy code.data.meta to code.properties.metastring
- rehype-image-toolkit
– Rehype plugin to enhance Markdown image syntax ![]() and Markdown/MDX media elements (,