Skip to content

Bioruebe/markdown-it-label

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

markdown-it-label

npm Tests markdown-it

A markdown-it plugin, which adds labels/tags

Preview

preview

Usage

Install

npm install markdown-it-label

Enable

const markdown_it = require("markdown-it");
const markdown_it_label = require("markdown-it-label");
const md = markdown_it().use(markdown_it_label, options);

Syntax

#[label_text](color)

e.g.

#[important](red)

is interpreted as

<p>
    <span class="label" style="background-color: rgb(255, 0, 0); color: white;">
        important
    </span>
</p>

Colors

Colors can be specified in the following 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.

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.

About

A markdown-it plugin, which adds labels/tags

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published