markdown-it-alert-desc

Create alerts for markdown-it

Usage no npm install needed!

<script type="module">
  import markdownItAlertDesc from 'https://cdn.skypack.dev/markdown-it-alert-desc';
</script>

README

Markdown-it-alert-desc

Markdown-it Alert plugin to be able to create alert, success and tip messages in your Markdown code.

Installation

npm install markdown-it-alert

Use plugin;

import md from "markdown-it";
import alert from "markdown-it-alert-desc";

md().use(alert);

Options

You can use any type of alert you want, proposed is to use the same type for everything; warning,error,tip,success or keep the type blank for the default styling of a message.

Links

Links enables the usage of links within your messages. By default this is turned on but can be disabled by;

md().use(alert, { links: false });

BEM

By default the class styles are compatible with bootstrap (alert alert-success), but you can also use the BEM syntax (alert alert--success).

md().use(alert, { bem: true });

role

A role is always given by default but can be disabled'

md().use(alert, { role: false });

tag

The default element is a div but this can be changed by adding a tag to the config

md().use(alert, { tag: "span" });

Types

All alerts with the following types will be caught and created.

  • info
  • warning
  • error
  • danger
  • tip
  • success

This list can be changed by giving your own values as an array;

md().use(alert, { types: ["my", "own", "values"] });

Now you can use:

::: own
Custom alerts
:::

Syntax

::: success
Hello world! [Link](#).
:::

Gets converted to:

<div class="alert alert-success" role="alert">
    <p>Hello world! <a href="#" class="alert-link">Link</a>.</p>
</div>