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. #483 and #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>`;
  });