···

       
153
       
 
       
>

     

       
154
       
 
       
> <cite>Bilbo Baggins</cite>

     

       
155
       
 
       


     

       
156
       
-
       
### Callouts

     

       
157
       
-
       


     

       
158
       
-
       
Sometimes I want to draw the user's attention to a useful piece of information. If I start a

     

       
159
       
-
       
blockquote with an [`<i> icon`](#icons-images), it will style it as a callout. For example,

     

       
160
       
-
       
I could make a little indented to-do list by starting a quote with this:

     

       
161
       
-
       


     

       
162
       
-
       
```html

     

       
163
       
-
       
> <i class="ri-checkbox-multiple-fill"></i> **To Do**

     

       
164
       
-
       
```

     

       
165
       
-
       


     

       
166
       
-
       
Which will produce this:

     

       
167
       
-
       


     

       
168
       
-
       
> <i class="ri-checkbox-multiple-fill"></i> **To Do**

     

       
169
       
-
       
>

     

       
170
       
-
       
> - <i class="ri-checkbox-line"></i> Section Headers

     

       
171
       
-
       
> - <i class="ri-checkbox-line"></i> Syntax Highlighting

     

       
172
       
-
       
> - <i class="ri-checkbox-line"></i> Block Quotes

     

       
173
       
-
       
> - <i class="ri-checkbox-blank-line"></i> Images &amp; Icons

     

       
174
       
-
       


     

       
175
       
-
       
### Warnings

     

       
176
       
-
       


     

       
177
       
-
       
If the icon class is `ri-error-warning-line`, the callout will be colored red:

     

       
178
       
-
       


     

       
179
       
-
       
> <i class="ri-error-warning-line"></i> **Warning!**

     

       
180
       
-
       
> 

     

       
181
       
-
       
> Here is something you should be warned about! There's even a big red

     

       
182
       
-
       
> bubble here so you know it's serious. Make sure you don't miss it, or

     

       
183
       
-
       
> the consequences could be dire...

     

       
184
       
-
       


     

       
185
       
-
       
If the icon class is `ri-lightbulb-line`, then the callout will be colored blue.

     

       
186
       
-
       


     

       
187
       
-
       
> <i class="ri-lightbulb-line"></i> **Did you know?**

     

       
188
       
-
       
>

     

       
189
       
-
       
> This isn't a warning, but I wanted to draw your attention to something cool! Did you know

     

       
190
       
-
       
> I take [reader questions](/ask), and will answer them on this blog? Now you know!

     

       
191
       
-
       


     

       
192
       
-
       
These add more colors&mdash;and therefore noise&mdash;to the page and should be used sparingly.

     

       
193
       
-
       
The warning callout specifically is to alert readers to something particularly important, such

     

       
194
       
-
       
as unsafe code or something they shouldn't do.

     

       
195
       
-
       


     

       
196
       
 
       
## Icons &amp; Images

     

       
197
       
 
       


     

       
198
       
 
       
They were shown in the previous section, but icons (provided by [Remix Icon](https://remixicon.com/)),

     

       
199
       
 
       
can be used anywhere by inserting an `<i>` tag with the icon's class. These are useful for adding

     

       
200
       
 
       
some detail and decorating to the pages, and is another way to break up text.

     

       
201
       
-
       


     

       
202
       
-
       
### Icon Tags

     

       
203
       
-
       


     

       
204
       
-
       
For example, we could check items off a to-do list as the reader progresses in a tutorial:

     

       
205
       
-
       


     

       
206
       
-
       
- <i class="ri-checkbox-line"></i> Wake up

     

       
207
       
-
       
- <i class="ri-checkbox-line"></i> Eat breakfast

     

       
208
       
-
       
- <i class="ri-checkbox-line"></i> Finish this post

     

       
209
       
-
       
- <i class="ri-checkbox-blank-line"></i> ???

     

       
210
       
-
       
- <i class="ri-checkbox-blank-line"></i> Profit!

     

       
211
       
 
       


     

       
212
       
 
       
## Embedding Media

     

       
213
       
 
       


     
···

       
246
       
 
       


     

       
247
       
 
       
### Videos

     

       
248
       
 
       


     

       
249
       
-
       
To embed a video, you use whatever embed tag works. For example, YouTube provides an `<iframe>` tag for

     

       
250
       
-
       
videos that you can use to embed into the page:

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
251
       
 
       


     

       
252
       
 
       
{{ youtube(id="kiWvNwuBbEE") }}

     

       
253
       
 
       


     

       
254
       
-
       
Do not use a `width` or `height` when doing this. The video should always be the full width of the page,

     

       
255
       
-
       
and the height will be auto-calculated based on a 16:9 aspect ratio.

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
256
       
 
       


     

       
257
       
 
       
## Miscellaneous

     

       
258
       
 
       


     

···

       
153
       
 
       
>

     

       
154
       
 
       
> <cite>Bilbo Baggins</cite>

     

       
155
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
156
       
 
       
## Icons &amp; Images

     

       
157
       
 
       


     

       
158
       
 
       
They were shown in the previous section, but icons (provided by [Remix Icon](https://remixicon.com/)),

     

       
159
       
 
       
can be used anywhere by inserting an `<i>` tag with the icon's class. These are useful for adding

     

       
160
       
 
       
some detail and decorating to the pages, and is another way to break up text.

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
161
       
 
       


     

       
162
       
 
       
## Embedding Media

     

       
163
       
 
       


     
···

       
196
       
 
       


     

       
197
       
 
       
### Videos

     

       
198
       
 
       


     

       
199
       
+
       
To embed a video, you use the `youtube` shortcode e.g.

     

       
200
       
+
       


     

       
201
       
+
       
> post.md

     

       
202
       
+
       
```md

     

       
203
       
+
       
{{/* youtube(id="kiWvNwuBbEE") */}}

     

       
204
       
+
       
```

     

       
205
       
+
       


     

       
206
       
+
       
You can also add the `autoplay=true` flag to make the video autoplay.

     

       
207
       
 
       


     

       
208
       
 
       
{{ youtube(id="kiWvNwuBbEE") }}

     

       
209
       
 
       


     

       
210
       
+
       
The shortcode is processed into an iframe which looks like this:

     

       
211
       
+
       


     

       
212
       
+
       
> post.html

     

       
213
       
+
       
```html

     

       
214
       
+
       
{{ youtube(id="kiWvNwuBbEE") }}

     

       
215
       
+
       
```

     

       
216
       
 
       


     

       
217
       
 
       
## Miscellaneous

     

       
218