nizel-plugin-alert

GitHub-style alert blocks for Nizel.

Install

npm install nizel-plugin-alert

Usage

import { useNizel } from 'nizel';
import { alertPlugin } from 'nizel-plugin-alert';

const nizel = useNizel({
  plugins: [alertPlugin()],
});

const html = await nizel.html(`::warning Careful
Pay **attention**.
::`);

Syntax

The plugin registers these custom block names:

• note
• tip
• important
• warning
• caution

The first argument or title prop is rendered as the alert title.

::tip Helpful
Use Markdown inside the alert body.
::

::tip
title: Helpful
::
Use Markdown inside the alert body.
::

Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | className | string | 'alert' | Root CSS class used for generated alert markup. |

Output

<div class="alert alert--warning" data-alert="warning">
  <p class="alert__title">Careful</p>
  <div class="alert__content">...</div>
</div>

License

MIT