When I was in the middle of writing a long-form article on my wireguard and Pi-Hole installation, a thought came to my mind: would it be cooler if I could make the note or the alert much more stands out? So, I did a quick read on that and I learned that I can write my own shortcodes template for Hugo.
So, I did that, and I am pretty pleased with the result. Here is my note-block shortcode.
$ cat layouts/shortcodes/note-block.html
<style>
.note-block {
position: relative;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 1em;
background: #f5f7f9;
color: #69c;
border-left: 10px solid #69c;
padding: 2px 2px 2px 10px;
margin-top: 5px;
margin-bottom: 10px;
}
</style>
<div class="note-block">
{{ .Inner | markdownify }}
</div>
I placed this file in the Hugo’s root layouts directory instead of theme’s layouts directory. Shortcode can be called based on the filename, which in this case the filename is note-block.
Some note here
Maybe another block would be nice, right? What about something like alert?
$ cat layouts/shortcodes/alert-block.html
<style>
.alert-block {
position: relative;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 1em;
background: #f5f7f9;
color: #ff0000;
border-left: 10px solid #ff0000;
padding: 2px 2px 2px 10px;
margin-top: 5px;
margin-bottom: 10px;
}
</style>
<div class="alert-block">
{{ .Inner | markdownify }}
</div>
Which would produce something like this:
Before you paste that thing into terminal, you better be careful because I won’t be responsible if something is toast
That’s it.