Hugo is a pretty powerful Web development tool. But everything isn’t always obvious. I’ve had to figure a few things out that could probably be documented a little better. So here are my notes on a few random things.

Embedded MP3 Files

This can be handled with a custom shortcode.

Create a file, layouts/shortcodes/mp3.html.

<p>
<audio class="player" controls preload="none">
	<source src="/media/{{ index .Params 0 }}" type="audio/mp3">
</audio>
</p>

Then, when you want to embed an MP3 file in a page:

{{< mp3 "ServerRoom-of-Horrors.mp3" >}}

Embed Youtube videos

There exists a built in shortcode.

If the URL is https://www.youtube.com/watch?v=abc1234, then you would use:

{{< youtube abc1234 >}}

Tables

For tables, I’ve so far found it easier to just use raw HTML. If this changes in the future, I’ll update this post.

To start, you need a shortcode to handle raw html. Create layouts/shortcodes/rawhtml.html

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

Then to use it in a page:

{{< rawhtml >}}
<table border=1 width="75%">
  <tr><th width="34%"> Column 1 </th>  <th width="33%"> Column 2 </th> <th width="33%"> Column 3 </th></tr>
  <tr><td width="34%"> Item 1a </td>   <td width="33%"> Item 2a </td>  <td width="33%"> Item 3a </td></tr>
  <tr><td width="34%"> Item 1b </td>   <td width="33%"> Item 2b </td>  <td width="33%"> Item 3b </td></tr>
  <tr><td width="34%"> Item 1c </td>   <td width="33%"> Item 2c </td>  <td width="33%"> Item 3c </td></tr>
</table>
{{< /rawhtml >}}

LaTex for Math Equations

This will use a locally hosted Katex js and fond files from https://github.com/KaTeX/KaTeX/releases.

Down load the tarball, and copy katex.min.css, katex.min.js, auto-render.min.js from the contrib directory and the fonts directory to ~/hugo/static/katex.

Next, create a partial in layouts/partials/math.html:

<link rel="stylesheet" href="http://domain.net/katex/katex.min.css">
<script defer src="http://domain.net/katex/katex.min.js"></script>
<script defer src="http://domain.net/katex/auto-render.min.js" onload="renderMathInElement(document.body);"></script>

Be sure to set domain.net to your domain.

Next add the following in your themes head.html in the section:

{{ if or .Params.math .Site.Params.math }}
     {{ partial "math.html" . }}
  {{ end }}

Then on pages you want to use LaTex on, add math: true to your Front Matter.

Then just use LaTex as normal.

That’s what I have so far. I’ll provide updates as I learn more new stuff.