diff --git a/docs/helpers.md b/docs/helpers.md
index 57eaa41d0..006b8e853 100644
--- a/docs/helpers.md
+++ b/docs/helpers.md
@@ -6,35 +6,69 @@ docsify extends Markdown syntax to make your documents more readable.
## Callouts
-### Important content
+Docsify supports [GitHub style](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) callouts (also known as "admonitions" or "alerts").
-Important content like:
+
+> [!CAUTION]
+> **Caution** callouts communicate negative potential consequences of an action.
-```markdown
-!> **Time** is money, my friend!
-```
+
+> [!IMPORTANT]
+> **Important** callouts communicate information necessary for users to succeed.
-is rendered as:
+
+> [!NOTE]
+> **Note** callouts communicate information that users should take into account.
-!> **Time** is money, my friend!
+
+> [!TIP]
+> **Tip** callouts communicate optional information to help a user be more successful.
-### Tips
+
+> [!WARNING]
+> **Warning** callouts communicate potential risks user should be aware of.
-General tips like:
+**Markdown**
+
```markdown
-?> _TODO_ unit test
+> [!CAUTION]
+> **Caution** callouts communicate negative potential consequences of an action.
+
+> [!IMPORTANT]
+> **Important** callouts communicate information necessary for users to succeed.
+
+> [!NOTE]
+> **Note** callouts communicate information that users should take into account.
+
+> [!TIP]
+> **Tip** callouts communicate optional information to help a user be more successful.
+
+> [!WARNING]
+> **Warning** callouts communicate potential risks user should be aware of.
```
-are rendered as:
+### Legacy Style ⚠️
-?> _TODO_ unit test
+The following Docsify v4 callout syntax has been deprecated and will be removed in a future version.
+
+!> **Important** callouts communicate information necessary for users to succeed.
+
+?> **Tip** callouts communicate optional information to help a user be more successful.
+
+**Markdown**
+
+```markdown
+!> **Important** callouts communicate information necessary for users to succeed.
+
+?> **Tip** callouts communicate optional information to help a user be more successful.
+```
## Link attributes
### disabled
-```md
+```markdown
[link](/demo ':disabled')
```
@@ -42,7 +76,7 @@ are rendered as:
Sometimes we will use some other relative path for the link, and we have to tell docsify that we don't need to compile this link. For example:
-```md
+```markdown
[link](/demo/)
```
@@ -50,13 +84,13 @@ It will be compiled to `link` and will load `/demo/README
Now you can do that
-```md
+```markdown
[link](/demo/ ':ignore')
```
You will get `link`html. Do not worry, you can still set the title for the link.
-```md
+```markdown
[link](/demo/ ':ignore title')
link
@@ -64,14 +98,14 @@ You will get `link`html. Do not worry, you can still set th
### target
-```md
+```markdown
[link](/demo ':target=_blank')
[link](/demo2 ':target=_self')
```
## Task lists
-```md
+```markdown
- [ ] foo
- bar
- [x] baz
@@ -91,19 +125,19 @@ You will get `link`html. Do not worry, you can still set th
### Class names
-```md
+```markdown
```
### IDs
-```md
+```markdown
```
### Sizes
-```md
+```markdown
@@ -119,7 +153,7 @@ You will get `link`html. Do not worry, you can still set th
## Heading IDs
-```md
+```markdown
### Hello, world! :id=hello-world
```
diff --git a/docs/ui-kit.md b/docs/ui-kit.md
index 1d32275a1..0c9057dfd 100644
--- a/docs/ui-kit.md
+++ b/docs/ui-kit.md
@@ -53,6 +53,40 @@
## Callouts
+### Github Style
+
+
+> [!CAUTION]
+> **Caution** callouts communicate negative potential consequences of an action.
+
+
+> [!IMPORTANT]
+> **Important** callouts communicate information necessary for users to succeed.
+
+
+> [!NOTE]
+> **Note** callouts communicate information that users should take into account.
+
+
+> [!TIP]
+> **Tip** callouts communicate optional information to help a user be more successful.
+
+
+> [!WARNING]
+> **Warning** callouts communicate potential risks user should be aware of.
+
+**Nested**
+
+
+> [!CAUTION]
+> **Caution** callouts communicate negative potential consequences of an action.
+> > [!IMPORTANT]
+> > **Important** callouts communicate information necessary for users to succeed.
+> > > [!NOTE]
+> > > **Note** callouts communicate information that users should take into account.
+
+#### Legacy Docsify Style
+
!> **Important** callout with `inline code` and additional placeholder text used
to force the content to wrap and span multiple lines.
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index d01e65aea..e35412541 100644
--- a/src/core/render/compiler.js
+++ b/src/core/render/compiler.js
@@ -13,6 +13,7 @@ import {
import { imageCompiler } from './compiler/image.js';
import { highlightCodeCompiler } from './compiler/code.js';
import { paragraphCompiler } from './compiler/paragraph.js';
+import { blockquoteCompiler } from './compiler/blockquote.js';
import { taskListCompiler } from './compiler/taskList.js';
import { taskListItemCompiler } from './compiler/taskListItem.js';
import { linkCompiler } from './compiler/link.js';
@@ -232,6 +233,7 @@ export class Compiler {
return `${str}`;
};
+ origin.blockquoteCompiler = blockquoteCompiler({ renderer });
origin.code = highlightCodeCompiler({ renderer });
origin.link = linkCompiler({
renderer,
diff --git a/src/core/render/compiler/blockquote.js b/src/core/render/compiler/blockquote.js
new file mode 100644
index 000000000..5f00951de
--- /dev/null
+++ b/src/core/render/compiler/blockquote.js
@@ -0,0 +1,36 @@
+export const blockquoteCompiler = ({ renderer }) =>
+ (renderer.blockquote = function ({ tokens }) {
+ const calloutData =
+ tokens[0].type === 'paragraph' &&
+ // 0: Match "[!TIP] My Title"
+ // 1: Mark "[!TIP]"
+ // 2: Type "TIP"
+ tokens[0].raw.match(/^(\[!(\w+)\])/);
+
+ let openTag = '