Markdown GitHub-style alerts

Anthony Fu made a markdown-it package for GitHub-style alerts: markdown-it-github-alerts. I was not aware GitHub seems to allow using the syntax already. Installing Anthony´s package will let you write within your Markdown text:

> [!TIP]
> Optional information to help a user be more successful.

and get:

<div class="markdown-alert markdown-alert-tip">
  <p class="markdown-alert-title">
    <svg class="octicon octicon-light-bulb mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>
    Tip</p>
    <p> Optional information to help a user be more successful. </p>
</div>

The resulting HTML is a paragraph, not a blockquote, which you can style to something like:

 Tip

Optional information to help a user be more successful.

The following alerts are available: [!NOTE] [!TIP] [!IMPORTANT] [!WARNING] [!CAUTION], and will render to:

 Note

Highlights information that users should take into account, even when skimming.

 Important

Crucial information necessary for users to succeed.

 Warning

Critical content demanding immediate user attention due to potential risks.

 Caution

Negative potential consequences of an action.

I found this works well for a webpage, where you have full control of your styling, but in case your content is delivered through a RSS feed (it should), the resulting formatting is not ideal. E.g. there is no space between the icon and the title, the color of the icon does not adapt to the text color, and the rendering as a div might not help for reading, a blockquote would be better in my view for this case.