Skip to main content

@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 = MarkdownIt().use(inlineRule, {
  marker: "=",
  tag: "mark",
  token: "mark",
  nested: true,
  placement: "before-emphasis",
});

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

Options

marker

  • Type: string
  • Required: Yes
  • Details: The punctuation character used as the marker (e.g., "^", "~", "=").

tag

  • Type: string
  • Required: Yes
  • Details: HTML tag name for the rendered element (e.g., "sup", "mark", "span").

token

  • Type: string
  • Required: Yes
  • Details: Token type name used for markdown-it token identification (e.g., "sup", "mark").

nested

  • Type: boolean
  • Default: false
  • Details: 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 with double markers. Supports nested bold, italic, etc. (e.g., mark/spoiler).

double

  • Type: boolean
  • Default: false (non-nested), forced true (nested)
  • Details: Whether markers must be doubled (e.g., !! vs !). Nested rules always use double markers.

placement

  • Type: "before-emphasis" | "after-emphasis"
  • Default: "after-emphasis"
  • Details: 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

  • Type: [attr: string, value: string][]
  • Details: Custom HTML attributes for the rendered element.

allowSpace

  • Type: boolean
  • Default: false
  • Details: 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,
  placement: "before-emphasis",
  attrs: [["class", "spoiler"]],
});

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

Custom syntax

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

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