Shortcodes are key-words based on templates which enlarge Markdown capabilities.
Let’s create a very simple shortcode to display a thumbnail in articles.
By clicking on the thumbnail, it will display the resized image.

Where shortcodes are stored

Shortcodes have to be created in the following directory ..\layouts\shortcodes

c:
cd \hugo\bin\sites\blog\layouts
mkdir shortcodes

HTML Template creation

Create mythumbnail.html file

In the previous directory

C:\hugo\sites\blog\layouts\shortcodes>dir
14/03/2018  15:21    <DIR>          .
14/03/2018  15:21    <DIR>          ..
14/03/2018  15:21               0 mythumbnail.html

Add content

The Get function allows us to retrieve our shortcode properties.

<a target="_blank" href="{{.Get "src"}}">
    <img class="mythumbnail" src="{{.Get "src"}}" alt="{{.Get "alt"}}">
</a>

Let’s create now the mythumbnail css class used in the <img> tag.

Create css file

C:\hugo\sites\blog\static\css>dir
15/03/2018  16:46    <DIR>          .
15/03/2018  16:46    <DIR>          ..
15/03/2018  17:02               0 mycss.css

Add content

.mythumbnail {
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 100%;
}

.mythumbnail:hover {
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
}

Link our new css file

With our beautifulhugo theme, we have to create the following file with this content

C:\hugo\sites\blog\layouts\partials>type head_custom.html

<link rel="stylesheet" href="{{ "css/mycss.css" | absURL }}" />

Using our shortcode in our md files