···
> <cite>Bilbo Baggins</cite>
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:
163
-
> <i class="ri-checkbox-multiple-fill"></i> **To Do**
166
-
Which will produce this:
168
-
> <i class="ri-checkbox-multiple-fill"></i> **To Do**
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 & Icons
177
-
If the icon class is `ri-error-warning-line`, the callout will be colored red:
179
-
> <i class="ri-error-warning-line"></i> **Warning!**
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...
185
-
If the icon class is `ri-lightbulb-line`, then the callout will be colored blue.
187
-
> <i class="ri-lightbulb-line"></i> **Did you know?**
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!
192
-
These add more colors—and therefore noise—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.
They were shown in the previous section, but icons (provided by [Remix Icon](https://remixicon.com/)),
can be used anywhere by inserting an `<i>` tag with the icon's class. These are useful for adding
some detail and decorating to the pages, and is another way to break up text.
204
-
For example, we could check items off a to-do list as the reader progresses in a tutorial:
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!
···
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:
199
+
To embed a video, you use the `youtube` shortcode e.g.
203
+
{{/* youtube(id="kiWvNwuBbEE") */}}
206
+
You can also add the `autoplay=true` flag to make the video autoplay.
{{ youtube(id="kiWvNwuBbEE") }}
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.
210
+
The shortcode is processed into an iframe which looks like this:
214
+
{{ youtube(id="kiWvNwuBbEE") }}
dunkirk.sh