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.
  

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.

Hugo 0.15 will have 30%+ faster render times thanks to this commit https://t.co/FfzhM8bNhT #gohugo #golang https://t.co/ITbMNU2BUf

— Steve Francia (@spf13) November 17, 2015

<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.

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.

• Hugo raw HTML shortcode

• Huho Tutorial - shortcodes