Courses
Learn Python

Learn Python

Hugo Blox Builder is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.

Embed videos, podcasts, code, LaTeX math, and even test students!

On this page, you’ll find some examples of the types of technical content that can be rendered with Hugo Blox.

Video

Teach your course by sharing videos with your students. Choose from one of the following approaches:

Youtube:

{{< youtube w7Ft2ymGmfc >}}

Bilibili:

{{< bilibili id="BV1WV4y1r7DF" >}}

Video file

Videos may be added to a page by either placing them in your assets/media/ media library or in your page’s folder, and then embedding them with the video shortcode:

{{< video src="my_video.mp4" controls="yes" >}}

Podcast

You can add a podcast or music to a page by placing the MP3 file in the page’s folder or the media library folder and then embedding the audio on your page with the audio shortcode:

{{< audio src="ambient-piano.mp3" >}}

Try it out:

Test students

Provide a simple yet fun self-assessment by revealing the solutions to challenges with the spoiler shortcode:

{{< spoiler text="πŸ‘‰ Click to view the solution" >}}
You found me!
{{< /spoiler >}}

renders as

πŸ‘‰ Click to view the solution
You found me πŸŽ‰

Math

Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the math option in your config/_default/params.yaml file.

To render inline or block math, wrap your LaTeX math with {{< math >}}$...${{< /math >}} or {{< math >}}$$...$${{< /math >}}, respectively.

Note

We wrap the LaTeX math in the Hugo Blox math shortcode to prevent Hugo rendering our math as Markdown. This callout now uses the standard Markdown alert syntax!

Example math block:

{{< math >}}
$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$
{{< /math >}}

renders as

$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$

Example inline math {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}} renders as $\nabla F(\mathbf{x}_{n})$ .

Example multi-line math using the math linebreak (\\):

{{< math >}}
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
{{< /math >}}

renders as

$$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$

Code

Hugo Blox Builder utilises Hugo’s Markdown extension for highlighting code syntax. The code theme can be selected in the config/_default/params.yaml file.

```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```

renders as

import pandas as pd
data = pd.read_csv("data.csv")
data.head()

Inline Images

{{< icon name="python" >}} Python

renders as

Python

Callouts & Alerts

Hugo Blox Builder now supports GitHub and Obsidian-style Markdown alerts for better content portability! These replace the old callout shortcode.

Basic Callout Types

Note - For general information:

> [!NOTE]
> This is a note callout with important information that users should know.
Note

This is a note callout with important information that users should know.

Tip - For helpful advice:

> [!TIP]
> Here's a helpful tip to make your workflow more efficient!
Tip

Here’s a helpful tip to make your workflow more efficient!

Important - For critical information:

> [!IMPORTANT]
> This is critical information that users must understand to proceed.
Important

This is critical information that users must understand to proceed.

Warning - For potential issues:

> [!WARNING]
> Be careful! This action might have unexpected consequences.
Warning

Be careful! This action might have unexpected consequences.

Caution - For dangerous actions:

> [!CAUTION]  
> Danger! This operation is irreversible and could cause data loss.
Caution

Danger! This operation is irreversible and could cause data loss.

Custom Titles

You can customize the title of any callout:

> [!WARNING]+ Custom Warning Title
> This warning has a custom title instead of just "Warning".
Custom Warning Title

This warning has a custom title instead of just “Warning”.

Legacy Syntax (Deprecated)

The old shortcode syntax still works but shows a deprecation warning:

{{< callout note >}}
This still works but is deprecated. Use the Markdown syntax above!
{{< /callout >}}
Note
This still works but is deprecated. Use the Markdown syntax above!

Benefits of the New Syntax

  • Portable: Works with GitHub, Obsidian, and other Markdown processors
  • Standard: Uses widely-adopted Markdown alert syntax
  • Clean: No Hugo-specific shortcodes needed
  • Future-proof: Supported by the latest Hugo versions (0.132.0+)
  • Multilingual: Callout titles are automatically translated based on your site’s language
    • English: “Note”, “Tip”, “Important”, “Warning”, “Caution”
    • Spanish: “Nota”, “Consejo”, “Importante”, “Advertencia”, “PrecauciΓ³n”
    • French: “Note”, “Conseil”, “Important”, “Attention”, “Prudence”
    • German: “Hinweis”, “Tipp”, “Wichtig”, “Warnung”, “Vorsicht”
    • Chinese: “注意”, “提瀺”, “重要”, “θ­¦ε‘Š”, “小心”

Did you find this page helpful? Consider sharing it πŸ™Œ