# Learn JavaScript

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.

*math*shortcode to prevent Hugo rendering our math as Markdown.

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