Creating Columns With Hugo Shortcodes

Creating Columns With Hugo Shortcodes

By David Nimon

Hugo allows for creating shortcodes, which allows you to use Markdown content but have special HTML rendering based on the shortcodes, so that you could have the simplicity of Markdown and still use the power of HTML.

In this example, we’ll be creating a column shortcode. This is based on the work that you can see at http://oostens.me/posts/hugo-column-shortcode/.

Creating the Shortcode HTML

Create a file called columns.html under layouts/shortcodes, which you may need to create. Add the following HTML

<div class="md-columns">
    {{ range split .Inner "<--->" }}
    {{ printf "<div class=\"markdown-inner\">" | htmlUnescape | safeHTML }}
        {{ . | $.Page.RenderString -}}
    {{ printf "</div>" | htmlUnescape | safeHTML }}
    {{ end }}
</div>

Then there will be CSS to make these divs appear as columns. If you are using the ananke theme, put the css in assets/ananke/css/shortcode.css. Then in your hugo.toml, add the following.

[params]
custom_css = ["shortcode.css"]

In the css file, add the following

.md-columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
    justify-content: space-between;
}

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

.md-columns .markdown-inner {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .md-columns > div {
        flex: auto !important;
    }
}

Now create a markdown page, Below the archetype data, create your content separated by columns.

{{< columns >}}

Column 1

<--->

Column 2

<--->

Column 3

<--->

Column 4

<--->

{{< /columns >}}

This will render as

Column 1
Column 2
Column 3
Column 4