$3

If 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! 🙌

remark-ins

[![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.

When should I use this?

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.

Installation

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
`

Usage

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

`html


inserted text


`

Without remark-ins, you’d get:

`html


++inserted text++


`

> [!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 ++
`

It is more flexible and powerful

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

inserted link

`

Options

There is no option for remark-ins.

Example:

`markdown
~~deleted content~~ and ++inserted content++

++inserted bold content++ and ++inserted bold content++

$3


`
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 (,

with optional captions, unwrapping images/videos/audio from paragraph, parsing directives in title for styling and adding attributes, and dynamically converting images into