GitHub Flavored Markdown Alerts
This morning, I finally got around to supporting GitHub's markdown alerts, again, in my site's MDX content.
Years ago when GitHub first quietly rolled these out, even before their official release1, I wrote a remark plugin to parse these into a blockquote that I could further customize from my Next.js mdx-components.ts file.
I remember that becoming a bit of a pain to maintain so I eventually deleted it, and resorted to authoring <Note> 2 mdx components instead.
But this morning, I missed being able to write the GitHub-flavored syntax, so I went curiously hunting for a remark plugin that someone else may have written at this point. Found one3, slapped into into my remarkPlugins, and bam.
Reunited.
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.
Footnotes#
-
GitHub Markdown Alerts, Dec 14, 2023 https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/ ↩
-
Geist Note https://vercel.com/geist/note ↩
-
Remark plugin ported from https://github.com/hyoban/remark-github-alerts/blob/main/src/index.ts ↩