@mdit/plugin-inline-rule

A unified inline syntax factory plugin for creating custom punctuation-based inline tags.

Usage

import MarkdownIt from "markdown-it";
import { inlineRule } from "@mdit/plugin-inline-rule";

const mdIt = new MarkdownIt().use(inlineRule, {
  marker: "=",
  tag: "mark",
  token: "mark",
  nested: true,
  double: true,
  placement: "before-emphasis",
});

mdIt.render("==highlighted==");
// <p><mark>highlighted</mark></p>

Options

markerRequiredstring

The punctuation character used as the marker (e.g., "^", "~", "=").

tagRequiredstring

HTML tag name for the rendered element (e.g., "sup", "mark", "span").

tokenRequiredstring

Token type name used for markdown-it token identification (e.g., "sup", "mark").

nestedboolean

Defaultfalse

When false, uses a high-performance linear scan. No inline tags are parsed inside (e.g., sub/sup). When true, uses the delimiter state machine. Supports nested bold, italic, and other inline rules inside the markers (e.g., mark/spoiler/ins).

doubleboolean

Defaultfalse

Whether markers must be doubled (e.g., ++ vs +). Set to true for double-marker syntax.

placement"before-emphasis" | "after-emphasis"

Default"after-emphasis"

Ruler position relative to the core emphasis rule. Use "before-emphasis" to override emphasis behavior for the same marker character (e.g., using _ as a custom tag).

attrs[attr: string, value: string][]

Custom HTML attributes for the rendered element.

allowSpaceboolean

Defaultfalse

Whether to allow unescaped spaces inside the content. Only applies to non-nested rules.

Examples

Simple tag (sup)

md.use(inlineRule, {
  marker: "^",
  tag: "sup",
  token: "sup",
});

// ^text^ → <sup>text</sup>

Nested tag with attributes (spoiler)

md.use(inlineRule, {
  marker: "!",
  tag: "span",
  token: "spoiler",
  nested: true,
  double: true,
  placement: "before-emphasis",
  attrs: [["class", "spoiler"]],
});

// !!hidden text!! → <span class="spoiler">hidden text</span>

Single-marker nested (ins)

md.use(inlineRule, {
  marker: "+",
  tag: "ins",
  token: "ins",
  nested: true,
  double: false,
  placement: "before-emphasis",
});

// +inserted+ → <ins>inserted</ins>
// ++nested inserted++ → <ins><ins>nested inserted</ins></ins>
// +**bold** inside+ → <ins><strong>bold</strong> inside</ins>

Custom syntax

md.use(inlineRule, {
  marker: "%",
  tag: "span",
  token: "help",
  nested: true,
  double: true,
  placement: "before-emphasis",
  attrs: [["class", "help-text"]],
});

// %%help text%% → <span class="help-text">help text</span>