remark-ins

This package is a unified (remark) plugin to add ins element (compatible with new parser "micromark").

"unified" is a project that transforms content with abstract syntax trees (ASTs). "remark" adds support for markdown to unified. "mdast" is the markdown abstract syntax tree (AST) that remark uses.

This plugin is a remark plugin that transforms the mdast.

When should I use this?

This plugin is useful if you want to add a <ins> element in markdown, which represents a range of text that has been added to a document. You can easily create <ins> element with the remark-ins.

Installation

This package is suitable for ESM only. In Node.js (version 14.14+, 16.0+), install with npm:

npm install remark-ins

or

yarn add remark-ins

Usage

use ++ for the syntax

++inserted content++

Say we have the following file, example.md, which consists some flexible markers.

++This text has been inserted++

And our module, example.js, looks as follows:

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:\

<p><ins class="remark-ins">This text has been inserted</ins></p>

Without remark-ins, you’d get:

<p>++This text has been inserted++</p>

Options

There is no option for the remark-ins.

Examples:

Here is ~~deleted content~~ and ++inserted content++

Here is **++bold and inserted content++**

### Heading with ++inserted content++

Without any option

use(remarkIns);

is going to produce as default:

<p>Here is <del>deleted content</del> and <ins class="remark-ins">inserted content</ins></p>
<p>Here is <strong><ins class="remark-ins">bold and inserted content</ins></strong></p>
<h3>Heading with <ins class="remark-ins">inserted content</ins></h3>

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.

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.

License

MIT © ipikuka

Keywords

unified remark remark-plugin mdast markdown remark ins remark inserted text remark ins element