s

Shortcodes in Hugo

By Angela C

March 11, 2021 in Hugo HTML

Reading time: 4 minutes.

Markdown is used for creating content in a Hugo website such as this blog. Sometimes though there are some things that are not supported by Markdown. Instead of writing raw HTML in the markdown files you want to include some unsupported content you can use shortcodes.

A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. See Hugo Tutorial on shortcodes.

Add a shortcode template to your site, in layouts/shortcodes/rawhtml.html, with the content:

<!--raw html-->
{{.Inner}}

Then use the shortcode in the markdown content by wrapping the HTML in opening and closing double chain brackets and single angle bracket, the shortcode name rawhtml

In the body of the post surround the shortcode with {{ }} and put the shortcode and any parameters inside the < > .



  

This is raw HTML, inside Markdown.

This is raw HTML, inside Markdown. This is some HTML, and a new line with a "quoted string".

Create a custom shortcode

  • Create a shortcodes folder under layouts
  • place the HTML file for the shortcode in this folder
  • the name of the HTML file without the .html extension will be the name of the custom shortcode
  • the action=" .Get"action" " in the first line is how the parameters are passed to the code. Hugo executes the .Get command and places the parameter passed into the action attribute.
<section id="main">
  <div>
   <h1 id="title">{{ .Title }}</h1>
    {{ range .Data.Pages }}
        {{ .Render "summary"}}
    {{ end }}
  </div>
</section>

testing using shortcodes:

I am using a very simple shortcode for displaying raw HTML where the file simply contains {{.Inner}} The raw HTML code of a pandas DataFrame can be simply copied into the markdown post. Alternatively the Jupyter notebook can be converted to markdown using the nbconvert commands. The pandas dataframe HTML includes a style tag containing styling for the dataframe. Simply wrapping the entire dataframe HTML in the shortcode will render the HTML code and display the table using the dataframe style tags.

name temperature symbol weatherDescription text windSpeed windGust cardinalWindDirection windDirection humidity rainfall pressure dayName date reportTime
0 Athenry 9 04n Cloudy "Cloudy" 9 - S 180 85 0.0 1021 Monday 19-04-2021 00:00
1 Athenry 9 04n Cloudy "Cloudy" 11 - SE 135 85 0.0 1020 Monday 19-04-2021 01:00
2 Athenry 9 04n Cloudy "Cloudy" 9 - S 180 84 0.0 1020 Monday 19-04-2021 02:00
3 Athenry 9 46n Light rain "Moderate Drizzle " 9 - SE 135 85 0.01 1020 Monday 19-04-2021 03:00
4 Athenry 8 05n Rain showers "Rain shower" 11 - SE 135 86 0.1 1019 Monday 19-04-2021 04:00

A shortcode with .Inner content can be used without the closing shortcode. Then I just used the bootstrap table class within the opening table tag.


Raw HTML table using shortcode as well as a bootstrap class for styling.

  • using the rawhtml shortcode {{ .Inner }}
  • changed the class to a bootstrap class "table-sm table-responsive-lg table-striped"
    name temperature symbol weatherDescription text windSpeed windGust cardinalWindDirection windDirection humidity rainfall pressure dayName date reportTime
    0 Athenry 9 04n Cloudy "Cloudy" 9 - S 180 85 0.0 1021 Monday 19-04-2021 00:00
    1 Athenry 9 04n Cloudy "Cloudy" 11 - SE 135 85 0.0 1020 Monday 19-04-2021 01:00
    2 Athenry 9 04n Cloudy "Cloudy" 9 - S 180 84 0.0 1020 Monday 19-04-2021 02:00
    3 Athenry 9 46n Light rain "Moderate Drizzle " 9 - SE 135 85 0.01 1020 Monday 19-04-2021 03:00
    4 Athenry 8 05n Rain showers "Rain shower" 11 - SE 135 86 0.1 1019 Monday 19-04-2021 04:00

another one using the .Inner raw html shortcode.

cache_last_updated package_id datastore_active id size state api_response_formats hash description format ... name created url notes api_access_url last_modified position revision_id resource_type api_type
0 NaN f586470f-d80a-4bec-ae71-0471213a148d False 0e482a49-c71f-49d9-b9ae-ccedfded126f NaN active [] NaN API JSON ... Yesterday's Weather Athenry 2019-11-01T06:11:14.155088 https://prodapi.metweb.ie/observations/athenry/yesterday NaN NaN NaN 0 44b29b0e-5690-42f9-a8ee-81c60e135678 NaN NaN
1 NaN f586470f-d80a-4bec-ae71-0471213a148d False 290a23b1-a403-4969-b5e9-e36e6a48a5c6 NaN active [] NaN CSV Yesterday's Weather CSV ... Yesterday's Weather Athenry 2019-11-01T06:11:14.155098 https://www.met.ie/latest-reports/observations/download/athenry/yesterday NaN NaN NaN 1 44b29b0e-5690-42f9-a8ee-81c60e135678 NaN NaN