comrak 0.52.0

A 100% CommonMark-compatible GitHub Flavored Markdown parser and formatter
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

---
title: Alerts
based_on: https://github.com/jgm/commonmark-hs/blob/master/commonmark-extensions/test/alerts.md
---

## Alerts

GitHub style alerts look like this:

```````````````````````````````` example
> [!NOTE]
> Highlights information that users should take into account, even when skimming.
.
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">Note</p>
<p>Highlights information that users should take into account, even when skimming.</p>
</div>
````````````````````````````````

It shouldn't matter if there's a soft break or hard break after
the `[!NOTE]`:

```````````````````````````````` example
> [!NOTE]  
> Highlights information that users should take into account, even when skimming.
.
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">Note</p>
<p>Highlights information that users should take into account, even when skimming.</p>
</div>
````````````````````````````````

Uppercase isn't required:

```````````````````````````````` example
> [!note]
> Highlights information that users should take into account, even when skimming.
.
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">Note</p>
<p>Highlights information that users should take into account, even when skimming.</p>
</div>
````````````````````````````````


Alerts can contain multiple blocks:

```````````````````````````````` example
> [!NOTE]
> Highlights information that users should take into account, even when skimming.
>
> Paragraph two.
.
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">Note</p>
<p>Highlights information that users should take into account, even when skimming.</p>
<p>Paragraph two.</p>
</div>
````````````````````````````````

Other kinds of alerts:

```````````````````````````````` example
> [!TIP]
> Optional information to help a user be more successful.
.
<div class="markdown-alert markdown-alert-tip">
<p class="markdown-alert-title">Tip</p>
<p>Optional information to help a user be more successful.</p>
</div>
````````````````````````````````

```````````````````````````````` example
> [!IMPORTANT]
> Crucial information necessary for users to succeed.
.
<div class="markdown-alert markdown-alert-important">
<p class="markdown-alert-title">Important</p>
<p>Crucial information necessary for users to succeed.</p>
</div>
````````````````````````````````

```````````````````````````````` example
> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.
.
<div class="markdown-alert markdown-alert-warning">
<p class="markdown-alert-title">Warning</p>
<p>Critical content demanding immediate user attention due to potential risks.</p>
</div>
````````````````````````````````

```````````````````````````````` example
> [!CAUTION]
> Negative potential consequences of an action.
.
<div class="markdown-alert markdown-alert-caution">
<p class="markdown-alert-title">Caution</p>
<p>Negative potential consequences of an action.</p>
</div>
````````````````````````````````

A title can be specified to override the default title:

```````````````````````````````` example
> [!NOTE] Pay attention
> Highlights information that users should take into account, even when skimming.
.
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">Pay attention</p>
<p>Highlights information that users should take into account, even when skimming.</p>
</div>
````````````````````````````````

The title does not process markdown and is escaped:

```````````````````````````````` example
> [!NOTE] **Pay** attention <script>
> Highlights information that users should take into account, even when skimming.
.
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">**Pay** attention &lt;script&gt;</p>
<p>Highlights information that users should take into account, even when skimming.</p>
</div>
````````````````````````````````

They work in the same places as a normal blockquote would, such as in a list item:

```````````````````````````````` example
- Item one

  > [!NOTE]
  > Highlights information that users should take into account, even when skimming.
.
<ul>
<li>
<p>Item one</p>
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">Note</p>
<p>Highlights information that users should take into account, even when skimming.</p>
</div>
</li>
</ul>
````````````````````````````````