Plugins

Alerts

nizel-plugin-alert adds GitHub-style callout blocks for notes, tips, important notices, warnings, and cautions.

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**.
::`);

Preview

Careful

Pay attention.

Syntax

Use one of the supported block names:

  • note
  • tip
  • important
  • warning
  • caution

The first argument becomes the alert title.

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

You can also pass the title as a block prop.

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

Options

OptionTypeDefaultDescription
classNamestring'alert'Root CSS class used for the generated alert markup.

Output

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

The plugin escapes title text and attributes before rendering.

Plugins

More Pages