You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>Sometimes writers want to call special attention to some piece of content. To do this, they will use a GFM blockquote with a special first paragraph. There are three types of these: notes, warnings, and callouts.</p>
119
+
120
+
<ul>
121
+
<li>To add a note, create a GFM blockquote whose first paragraph starts with <code>**Note:**</code>.</li>
122
+
<li>To add a warning, create a GFM blockquote whose first paragraph starts with <code>**Warning:**</code>.</li>
123
+
<li>To add a callout, create a GFM blockquote whose first paragraph starts with <code>**Callout:**</code>.</li>
124
+
</ul>
125
+
126
+
<p>Notes and warnings will render the <strong>Note:</strong> or <strong>Warning:</strong> text in the output, while callouts will not. This makes callouts a good choice when an author wants to provide a custom title.</p>
127
+
128
+
<p>Processing of the markup works on the AST it produces, not on the exact characters provided. This means that providing <code><strong>Note:</strong></code> will also generate a note. However, the Markdown syntax is required as a matter of style.</p>
129
+
130
+
<p>Multiple lines are produced by an empty block quote line in the same way as normal paragraphs. Further, multiple lines without a space are also treated like normal markdown lines, and concatenated.</p>
131
+
132
+
<p>The blockquote can contain code blocks or other block elements.</p>
133
+
134
+
<p>Because the text "Note:" or "Warning:" also appears in the rendered output, it has to be sensitive to translations. In practice this means that every locale supported by MDN must supply its own translation of these strings, and the platform must recognize them as indicating that the construct needs special treatment.</p>
135
+
136
+
<h4>Examples</h4>
137
+
138
+
<h5>Note</h5>
139
+
140
+
<pre>
141
+
> **Note:** This is how you write a note.
142
+
>
143
+
> It can have multiple lines.
144
+
</pre>
145
+
146
+
<p>This will produce the following HTML:</p>
147
+
148
+
<preclass="brush: html">
149
+
<div class="notecard note">
150
+
<p><strong>Note:</strong> This is how you write a note.</p>
151
+
<p>It can have multiple lines.</p>
152
+
</div>
153
+
</pre>
154
+
155
+
<p>This HTML will be rendered as a highlighted box, like:</p>
156
+
157
+
<divclass="notecard note">
158
+
<p><strong>Note:</strong> This is how you write a note.</p>
159
+
<p>It can have multiple lines.</p>
160
+
</div>
161
+
162
+
<h5>Warnings</h5>
163
+
164
+
<pre>
165
+
> **Warning: This is how you write a warning.
166
+
>
167
+
> It can have multiple paragraphs.
168
+
</pre>
169
+
170
+
<p>This will produce the following HTML:</p>
171
+
172
+
<preclass="brush: html">
173
+
<div class="notecard warning">
174
+
<p><strong>Warning:</strong> This is how you write a warning.</p>
175
+
<p>It can have multiple paragraphs.</p>
176
+
</div>
177
+
</pre>
178
+
179
+
<p>This HTML will be rendered as a highlighted box, like:</p>
180
+
181
+
<divclass="notecard warning">
182
+
<p><strong>Warning:</strong> This is how you write a warning.</p>
183
+
<p>It can have multiple paragraphs.</p>
184
+
</div>
185
+
186
+
<h5>Callouts</h5>
187
+
188
+
<pre>
189
+
> **Callout:** **This is how you write a callout**.
190
+
>
191
+
> It can have multiple paragaphs.
192
+
</pre>
193
+
194
+
<p>This will produce the following HTML:</p>
195
+
196
+
<preclass="brush: html">
197
+
<div class="callout">
198
+
<p><strong>This is how you write a callout.</strong></p>
199
+
<p>It can have multiple paragraphs.</p>
200
+
</div>
201
+
</pre>
202
+
203
+
<p>This HTML will be rendered as a highlighted box, like:</p>
204
+
205
+
<divclass="callout">
206
+
<p><strong>This is how you write a callout.</strong></p>
207
+
<p>It can have multiple paragraphs.</p>
208
+
</div>
209
+
210
+
<h5>Translated warning</h5>
211
+
212
+
<p>For example, if we want to use "Warnung" for "Warning" in German, then in German pages we would write:</p>
213
+
214
+
<pre>
215
+
> Warnung: So schreibt man eine Warnung.
216
+
</pre>
217
+
218
+
<p>...and this will produce:</p>
219
+
220
+
<preclass="brush: html">
221
+
<div class="notecard warning">
222
+
<p><strong>Warnung:</strong> So schreibt man eine Warnung.</p>
223
+
</div>
224
+
</pre>
225
+
226
+
<h5>Note containing a code block</h5>
227
+
228
+
<p>This example contains a code block.</p>
229
+
230
+
<pre>
231
+
> **Note:** This is how you write a note.
232
+
>
233
+
> It can contain code blocks.
234
+
>
235
+
> ```js
236
+
> const s = "I'm in a code block";
237
+
> ```
238
+
> Like that.
239
+
</pre>
240
+
241
+
<p>This will produce the following HTML:</p>
242
+
243
+
<preclass="brush: html">
244
+
<div class="notecard note">
245
+
<p><strong>Note:</strong> This is how you write a note.</p>
246
+
<p>It can contain code blocks.</p>
247
+
<pre class="brush: js">const s = "I'm in a code block";</pre>
248
+
<p>Like that.</p>
249
+
</div>
250
+
</pre>
251
+
252
+
<p>This HTML will be rendered as with a code block, like:</p>
253
+
254
+
<divclass="notecard note">
255
+
<p><strong>Note:</strong> This is how you write a note.</p>
256
+
<p>It can contain code blocks.</p>
257
+
<preclass="brush: js">const s = "I'm in a code block";</pre>
0 commit comments