# π©πΌβπ« Teach academic courses

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

Hugo Blox Builder 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

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