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
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.
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";
> [!note] title here
> body here
And it looks like this:
body here
Pretty straightforward, actually.
Links