Support Alerts in Github Flavored Markdown

[bbb651]

Context

I noticed Alerts are not supported.

They are pretty poorly specified as they are completely absent from the specification, in fact the only official information from github I found acknowledging they exist is the discussion I linked above.

Proposal

Add support for alerts, and enable it by default in the gfm-like flavor.

Is this out of scope for the core project and should be left to a plugin? I noticed task lists are a plugin instead of being supported by default which is strange to me because they are fairly common.

Tasks and updates

• [ ] Implement a parser rule for alerts

Add support for each of them in the renderer:

• [ ] Note
• [ ] Tip
• [ ] Important
• [ ] Warning
• [ ] Caution

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

[chrisjsewell]

Heya yeh it would go in https://github.com/executablebooks/mdit-py-plugins

[bbb651]

I found the a page about markdown formatting in the docs, it seems to be a lot more up to date than their specification, apparently they are called alerts.

They use octicons which are MIT licensed so we can use the same ones, specifically info, light-bulb, report, alert, stop and their colors are #4493f8, #3fb950, #a371f7, #d29922, #f85149 respectively

(Just noticed color in backticks is another missing feature, github has been adding a ton of things lately)

[bbb651]

I made a plugin that parses them and renders them like normal blockquotes but inserts alert and alert-* classes that can be used for styling, I'll clean it up a bit and make a pr in the plugins repo

Is there interest in support arbitrary alerts? It should be pretty straight forward to implement (I'm currently storing the alert type as an enum but I can change it to a string, of course from a whitelisted list to not allow arbitrary user input reflected classes)

Here the generated html:

<p>Text</p>
<blockquote>
<p>Quote</p>
</blockquote>
<blockquote class="alert alert-note">
<p>Highlights information that users should take into account, even when skimming.</p>
</blockquote>
<blockquote class="alert alert-tip">
<p>Optional information to help a user be more successful.</p>
</blockquote>
<blockquote class="alert alert-important">
<p>Crucial information necessary for users to succeed.</p>
</blockquote>
<blockquote class="alert alert-warning">
<p>Critical content demanding immediate user attention due to potential risks.</p>
</blockquote>
<blockquote class="alert alert-caution">
<p>Negative potential consequences of an action.</p>
</blockquote>

And here's how it looks in my project with styling as an example: