Use GitHub alerts (admonitions, callouts) in Astro

2024-07-03 Eiko Wagenknecht

On December 14, 2023, GitHub introduced alerts, a feature also called “admonitions” that users to add callout boxes to Markdown files. These boxes are styled differently from the rest of the text and can be used to highlight important information, warnings, or tips.

So why not use them in your Astro blog as well? The setup is straightforward:

First, install the remark-github-blockquote-alert package:

npm install remark-github-blockquote-alert

Next, import the styles in the layouts where you want to use the admonitions:

import "remark-github-blockquote-alert/alert.css";

Then, add the plugin to your Astro configuration:

import { remarkAlert } from "remark-github-blockquote-alert";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkAlert],
  },
});

That’s it! Now you can use the admonitions in your Markdown files. Here are some examples:

Note:

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

Tip:

> [!TIP]
> Optional information to help a user be more successful.

Important:

> [!IMPORTANT]  
> Crucial information necessary for users to succeed.

Warning:

> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks.

Caution:

> [!CAUTION]
> Negative potential consequences of an action.

They can also be nested:

> [!TIP]
> This is a tip.
>
> > [!WARNING]
> > This is a warning inside a tip.

Rendered, it looks like this: