Adding markdown callouts to Astrojs

Took longer to figure out than I'd like to admit - documenting it here for anyone that might want to do the same.

2024-10-21

#astrojs #markdown

Context

I usually do all my writing in Obsidian, which allows for GFM (Github-flavoured markdown). One feature of GFM allows for “callouts” - highlighted blocks that emphasize a certain portion of the text. (As an “aside”, we really need to standardize what these are called: “callouts”, “admonitions”, “alerts”, even “aside”).

Now, this doesn’t come out of the box with Astro, but I found a nice package that helps us achieve this.

Config

Install some required packages:

npm i "@r4ai/remark-callout"
npm i"@astrojs/tailwind"

In astro.config.mjs:

export default defineConfig({
  // ...rest of config
  markdown: {
    remarkPlugins: [
      // ...
      remarkCallout,
    ],
  },
  integrations: [
    tailwind({
      applyBaseStyles: false, // don't use the overrides - we only install tailwind to use the @apply directives
      nesting: true,
    }),
  ],
});

Installed Tailwind because I’m too lazy (tired) to write styles for the callout blocks, and remark-callout provides some example CSS that requires it - here’s the raw CSS file.

In the layout that uses callouts:

import "../styles/_callout.css";

Result

> [!note] title here
> body here

And it looks like this:

title here

body here

Pretty straightforward, actually.

Links