NOTES, THOUGHTS, SCRIBBLES

Atom.

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#

  1. GitHub Markdown Alerts, Dec 14, 2023 https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/

  2. Geist Note https://vercel.com/geist/note

  3. Remark plugin ported from https://github.com/hyoban/remark-github-alerts/blob/main/src/index.ts