Hugo Pros and Cons shortcode

Hugo Pros and Cons shortcode

December 2020  438  3 mins Hugo

Shortcode to easily include pro’s and con’s list in Hugo with markdown. This shortcode is derived from the column shortcode.

This article was written for Hugo 0.79.

Usage

There are no options, content can be added to the pros and cons column in markdown, separated by <-cons->. The content can be anything (footnotes and formatting is supported as well). Primary intend is to add lists. Note, this shortcode requires to use the %-syntax (see this post for more info).

Example

{{% procon %}}
* The fist pro
* The **second** pro
<-cons->
* Not so great feature
* Not ideal either[^why]
* Really bad
{{% /procon %}}
Pros
  • The fist pro
  • The second pro
Cons
  • Not so great feature
  • Not ideal either1
  • Really bad

Code

The shortcode which is very straight forward, the content is split by <-cons-> and put in the pros and cons column respectively. Analog as how the column shortcode works. For more info why print is required see this post.

While the Pros and Cons text is currently hard-coded in the shortcode it can be easily translated by using Hugo’s built-in i8n support.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{ printf "<div class=\"md-procon\">" | htmlUnescape | safeHTML }}
{{- $split := split .Inner "<-cons->" -}}
{{ printf "<div class=\"column\">" | htmlUnescape | safeHTML }}
{{ printf "<div class=\"pro label-bg\">" | htmlUnescape | safeHTML }}Pros{{ printf "</div>" | htmlUnescape | safeHTML }}
{{ index $split 0 | safeHTML }}
{{ printf "</div>" | htmlUnescape | safeHTML }}
{{ printf "<div class=\"column\">" | htmlUnescape | safeHTML }}
{{ printf "<div class=\"con label-bg\">" | htmlUnescape | safeHTML }}Cons{{ printf "</div>" | htmlUnescape | safeHTML }}
{{ index $split 1 | safeHTML }}
{{ printf "</div>" | htmlUnescape | safeHTML }}
{{ printf "</div>" | htmlUnescape | safeHTML }}

The accompanying SCSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// {{< procon >}}
.md-procon {
  background-color: var(--md-bg-color-dark);
  display: flex;
  flex-wrap: wrap;
  padding-top: 1em;
  margin-top: 0.5em;

  >div {
    flex: 50%;
    margin: 1rem 0;
    min-width: 100px;
    max-width: 100%;
    padding: 0 1rem;
  }

  ul {
    margin-top: 0px;
  }

  .column {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 0;
  }

  .label-bg {
    width: 200px;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: $border-radius;
  }

  .pro {
    background-color: var(--success-color);
  }

  .con {
    background-color: var(--failure-color);
  }
}

  1. because reasons ↩︎

Noticed an error in this post? Corrections are appreciated.
© Nelis Oostens