Support GitHub style admonitions / alerts / callouts

[jhildenbiddle]

Feature request

Support GFM admonitions / callouts.

• Details: https://github.com/orgs/community/discussions/16925
• Docs: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts

Problem or desire

GitHub recently added supports for markdown admonitions / callouts. Docsify should add support for this format so that these elements are rendered as expected in both GitHub and Docsify environments.

GitHub Markdown:

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

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

> [!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.

GitHub Output:

Note

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

Tip

Optional information to help a user be more successful.

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.

Proposal

1. Render GFM admonitions. Styles do not need to match GFM styles.
2. Consider deprecating current ?> and !> style helpers in favor of GFM-style blockquote helpers. This will address long-standing issues with multi-line helpers (e.g. Question about "General Tips" #483 and warning blockquotes do not render sub-elements correctly #1588) and poor rendering of these helpers when rendering Markdown outside of Docsify (e.g. GitHub).

Implementation

• Utilize blockquote compiler instead of paragraph compiler

[Koooooo-7]

Nice and pretty styling solution.

FYI: Add and override the blockquote parser in docsify by marked v13+.

export const blockquoteCompiler = ({ renderer }) =>
  (renderer.blockquote = function ({ tokens }) {
    const body = this.parser.parse(tokens);
    // we could add the GFM admonitions / callouts support here.
    return `<blockquote>${body}</blockquote>`;
  });