[Feat]: Highlight > [!alert] quotes GitHub style

[AlejandroSuero]

Is your feature request related to a problem? Please describe.

Now Github renders the block quotes that contains [!note], [!important], etc. like this:

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.

I would be nice to have this in glow to show the relevance in the text.

Right now it renders like this:

│ [!note]

│ Useful information that users should know, even when skimming content.

Describe the solution you'd like

I would like it to render the > [!note] part like Note in bold and blue, and > [!important] in bold and purple or pink, and the other colours of alerts. Also changing the color to the │ to show the range of the quote.

GitHub renders this alerts case insensitive. It will only look for > [!alert], like matching that the string contains > [!%s]\n trimmed, being the string one of the values in the example, no extra spaces inside [] or characters inside/outside > [!%s].

This could also apply for > Note: or > Important: but this would be optional.

Describe alternatives you've considered

It could just change the color of │ to indicate what kind of quote it is.

Additional context

Documentation reference from GitHub: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts