A markdown-it plugin, which adds labels/tags

npm install markdown-it-label

// ESM
import MarkdownIt from "markdown-it";
import MarkdownItLabel from "markdown-it-label";
const md = new MarkdownIt().use(MarkdownItLabel, options);

// CommonJS
const markdownIt = require("markdown-it");
const markdownItLabel = require("markdown-it-label");
const md = markdownIt().use(markdownItLabel, options);

#[Label text](color)

e.g.

#[important](red)

is interpreted as

<span class="mdi-label mdi-label-text-light" style="background-color: rgb(255, 0, 0)">
    important
</span>

Colors can be specified in multiple ways:

• Color names: red, gold, WhiteSmoke
• Hex colors: #FF0000, #F5F5F5
• Shorthand hexadecimal form: #000, #09C

The background color is set automatically based on the brightness of the background. Dark and light text colors can be set via options object.

The color of each label has to be defined only once in the document. Any label with the same text will then use it without explicitly specifying it. It does not matter if the label is defined before or after the shorthand usage.

## Define label color anywhere in the document
#[important](yellow)

## Use shorthand without the color argument
#[important]()

## You can override the color on a per-label basis
** This label is red **
#[important](red)

** All others are yellow **
#[important]()

.mdi-label {
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.mdi-label-text-light {
    color: white
}

.mdi-label-text-dark {
    color: #332900
}

{
    cssClassLabel: "mdi-label",
    cssClassTextLight: "mdi-label-text-light",
    cssClassTextDark: "mdi-label-text-dark"
}

The class to assign to the span element. Useful for styling the label.

The CSS class to be used for the label text. Which of the two is used depends on the background color and is chosen automatically to ensure proper contrast.