Embed Media
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
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.
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 Python
