GFM Callouts in Astro

You can get GitHub flavored markdown callouts on your Astro site with a simple remark plugin. And then you are able to do this:

> [!WARNING]
> This is pretty cool

Warning

This is pretty cool

Install the plugin

pnpm i remark-github-alerts

Then activate it by adding it to your astro config

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

Now Astro is parsing the callouts, but they need styling. The plugin’s GitHub shows what CSS to import, but it gives you light colors by default and dark colors only if the user has dark mode on. But my website is always dark mode on 😎

So I went directly to the dark mode stylesheet, yoinked the colors out of there and saved them in my own CSS file.

:root {
  --color-note: #2f81f7;
  --color-tip: #3fb950;
  --color-warning: #d29922;
  --color-severe: #db6d28;
  --color-caution: #f85149;
  --color-important: #a371f7;
}

My imports ended up looking like this:

import "../../styles/gh-callout-colors.css";
import "remark-github-alerts/styles/github-base.css";

I hope this article helped!

GFM Callouts in Astro

Sources