Embed rich media such as videos and LaTeX mathHugoBlox Kit is designed to give technical content creators a seamless experience. You can focus on the content and the HugoBlox Kit 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.
Citation
Here’s an example of citing a publication using the cite shortcode:
You can also use the default view by omitting the view parameter:
Video
Teach your course by sharing videos with your students. Choose from one of the following approaches:
Youtube:
{{< youtube D2vj0WcvH5c >}}
Bilibili:
{{< bilibili 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
HugoBlox Kit supports a Markdown extension for $\LaTeX$ math. Enable math by setting the math: true option in your page’s front matter, or enable math for your entire site by toggling math in your config/_default/params.yaml file:
features:
math:
enable: true
To render inline or block math, wrap your LaTeX math with $...$ or $$...$$, respectively.
Example math block:
$$
\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}
$$
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 $\nabla F(\mathbf{x}_{n})$ renders as $\nabla F(\mathbf{x}_{n})$.
Example multi-line math using the math linebreak (\\):
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
renders as
$$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$Code
HugoBlox Kit 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
