volatile write

TIL: GitHub flavored Markdown admonitions

Today, I learned that GitHub recently added support for admonitions in Markdown. Github calls them Alerts and – since it's a Github flavored Markdown extension – they only render on GitHub: GitHub docs

Alerts come in 5 kinds, NOTE, TIP, IMPORTANT, WARNING, CAUTION and are used by adding a [!<KIND>] tag in a blockquote:

> [!NOTE]
> alert text goes here

You can see it in action on the neo4rs repo: https://github.com/neo4j-labs/neo4rs?tab=readme-ov-file#implementation-progress

A screenshot of the README of the neo4rs project, showcasing the IMPORTANT admonition as rendered by GitHub

I tried to preview the rendered Markdown file with the Markdown preview extension for the gh cli and Grip – GitHub README Instant Preview. Both tools, to my knowledge, use the GitHub API to render the Markdown, but neither rendered the Alert properly at first.

The GitHub API for rendering Markdown does render the alerts properly, but only when the mode is set to gfm (the default is the markdown value):

# Use cURL to use the GitHub API, setting the `gfm` mode
$ curl -L -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" https://api.github.com/markdown -d '{"text": "> [!IMPORTANT]\ntest", "mode":"gfm"}'
<div class="markdown-alert markdown-alert-important"><p class="markdown-alert-title"><svg class="octicon octicon-report mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>Important</p><p>test</p>
</div>
# Use cURL to use the GitHub API, setting the `markdown` mode
$ curl -L -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" https://api.github.com/markdown -d '{"text": "> [!IMPORTANT]\ntest", "mode":"markdown"}'
<blockquote>
<p>[!IMPORTANT]
test</p>
</blockquote>
# Use cURL to use the GitHub API, using the default mode
$ curl -L -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" https://api.github.com/markdown -d '{"text": "> [!IMPORTANT]\ntest"}'
<blockquote>
<p>[!IMPORTANT]
test</p>
</blockquote>

To set the correct mode for grip, you need to pass the --user-content flag, which will set the gfm internally.

gh markdown-preview does not set the gfm mode in any way, I opened an issue to see if we can add this.

Thoughts? Leave a comment