162 lines
4.2 KiB
Markdown
162 lines
4.2 KiB
Markdown
---
|
|
title: 👩🏼🏫 Teach academic courses
|
|
summary: Embed videos, podcasts, code, LaTeX math, and even test students!
|
|
date: 2023-10-24
|
|
math: true
|
|
authors:
|
|
- me
|
|
tags:
|
|
- Hugo
|
|
- Hugo Blox Builder
|
|
- Markdown
|
|
image:
|
|
caption: 'Embed rich media such as videos and LaTeX math'
|
|
cover:
|
|
image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
|
|
position:
|
|
x: 50
|
|
y: 40
|
|
overlay:
|
|
enabled: true
|
|
type: "gradient"
|
|
opacity: 0.4
|
|
gradient: "bottom"
|
|
fade:
|
|
enabled: true
|
|
height: "80px"
|
|
icon:
|
|
name: "✨"
|
|
---
|
|
|
|
[Hugo Blox Builder](https://hugoblox.com) 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.
|
|
|
|
## Citation
|
|
|
|
Here's an example of citing a publication using the cite shortcode:
|
|
|
|
{{< cite page="/publications/preprint" view="citation" >}}
|
|
|
|
You can also use the default view by omitting the view parameter:
|
|
|
|
{{< cite page="/publications/conference-paper" >}}
|
|
|
|
## Video
|
|
|
|
Teach your course by sharing videos with your students. Choose from one of the following approaches:
|
|
|
|
**Youtube**:
|
|
|
|
{{</* youtube D2vj0WcvH5c */>}}
|
|
|
|
{{< 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](https://gohugo.io/content-management/page-bundles/), 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:
|
|
|
|
{{< audio src="ambient-piano.mp3" >}}
|
|
|
|
## Test students
|
|
|
|
Provide a simple yet fun self-assessment by revealing the solutions to challenges with the `spoiler` shortcode:
|
|
|
|
```markdown
|
|
{{</* spoiler text="👉 Click to view the solution" */>}}
|
|
You found me!
|
|
{{</* /spoiler */>}}
|
|
```
|
|
|
|
renders as
|
|
|
|
{{< spoiler text="👉 Click to view the solution" >}} You found me 🎉 {{< /spoiler >}}
|
|
|
|
## 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:
|
|
|
|
```yaml
|
|
features:
|
|
math:
|
|
enable: true
|
|
```
|
|
|
|
To render _inline_ or _block_ math, wrap your LaTeX math with `$...$` or `$$...$$`, respectively.
|
|
|
|
Example **math block**:
|
|
|
|
```latex
|
|
$$
|
|
\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 (`\\`):
|
|
|
|
```latex
|
|
$$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
|
|
|
|
```python
|
|
import pandas as pd
|
|
data = pd.read_csv("data.csv")
|
|
data.head()
|
|
```
|
|
|
|
## Inline Images
|
|
|
|
```go
|
|
{{</* icon name="python" */>}} Python
|
|
```
|
|
|
|
renders as
|
|
|
|
{{< icon name="python" >}} Python
|
|
|
|
## Did you find this page helpful? Consider sharing it 🙌
|