https://github.com/bioruebe/markdown-it-label
A markdown-it plugin, which adds labels/tags
https://github.com/bioruebe/markdown-it-label
markdown-it markdown-it-plugin tagging
Last synced: 9 months ago
JSON representation
A markdown-it plugin, which adds labels/tags
- Host: GitHub
- URL: https://github.com/bioruebe/markdown-it-label
- Owner: Bioruebe
- License: mit
- Created: 2020-04-04T05:42:21.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-21T09:34:33.000Z (about 2 years ago)
- Last Synced: 2025-06-29T13:46:33.030Z (10 months ago)
- Topics: markdown-it, markdown-it-plugin, tagging
- Language: TypeScript
- Homepage:
- Size: 137 KB
- Stars: 4
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# markdown-it-label
[](https://www.npmjs.com/package/markdown-it-label) [](https://github.com/Bioruebe/markdown-it-label/actions/workflows/node.js.yml) 
> A markdown-it plugin, which adds labels/tags
## Preview
## Usage
### Install
```bash
npm install markdown-it-label
```
### Enable
```js
// 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
```md
#[Label text](color)
```
e.g.
```md
#[important](red)
```
is interpreted as
```html
important
```
#### Colors
Colors can be specified in multiple ways:
- [Color names](https://www.w3schools.com/colors/colors_names.asp): `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.
```md
## 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
```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
```js
{
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.