markdown-it-label

A markdown-it plugin, which adds labels/tags

Preview

Usage

Install

npm install markdown-it-label

Enable

// 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);

Syntax

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

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.

Shorthand usage

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]()

Example CSS

.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
}

Options

Default values

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

cssClassLabel

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

cssClassTextLight, cssClassTextDark

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.