shortcode: alert & note blocks

Published on 14 Apr 2019

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.

shortcode note

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.