remark-github-blockquote-alert

Remark plugin to add support for GitHub Alert

Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information.

Installation

This package is ESM only: Node 12+ is needed to use it and it must be import instead of require.

npm install remark-github-blockquote-alert

Usage

import plugin from 'remark-github-blockquote-alert'

const html = String(
  await remark().use(remarkParse).use(plugin).use(remarkRehype).use(rehypeStringify).process(`\
# Alert
> [!NOTE]
> test
`),
)

The output HTML will be:

<h1>Alert</h1>
<div class="markdown-alert markdown-alert-note" dir="auto">
<p class="markdown-alert-title" dir="auto"><svg class="octicon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>NOTE</p>
<p>Useful information that users should know, even when skimming content.</p>
</div>

To add an alert, use a special blockquote line specifying the alert type, followed by the alert information in a standard blockquote. Five types of alerts are available:

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Here are the rendered alerts:

rehype-rewrite Rewrite element with rehype.
rehype-video Add improved video syntax: links to .mp4 and .mov turn into videos.
rehype-attr New syntax to add attributes to Markdown.
rehype-ignore Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

JSPM