6.5 KiB
title, summary, date, type, math, tags, image, content_meta
| title | summary | date | type | math | tags | image | content_meta | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Learn Python | Easily learn Python in 10 minutes! | 2023-10-24 | docs | false |
|
|
|
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 D2vj0WcvH5c >}}
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:
{{< audio src="ambient-piano.mp3" >}}
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
{{< spoiler text="👉 Click to view the solution" >}} You found me 🎉 {{< /spoiler >}}
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.
Note
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
{{< 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 >}}
Example inline math {{</* math */>}}$\nabla F(\mathbf{x}_{n})${{</* /math */>}} renders as {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}.
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
{{< math >}}
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}
{{< /math >}}
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
{{< icon name="python" >}} Python
Callouts & Alerts
Hugo Blox Builder now supports GitHub and Obsidian-style Markdown alerts for better content portability! These replace the old callout shortcode.
Basic Callout Types
Note - For general information:
> [!NOTE]
> This is a note callout with important information that users should know.
Note
This is a note callout with important information that users should know.
Tip - For helpful advice:
> [!TIP]
> Here's a helpful tip to make your workflow more efficient!
Tip
Here's a helpful tip to make your workflow more efficient!
Important - For critical information:
> [!IMPORTANT]
> This is critical information that users must understand to proceed.
Important
This is critical information that users must understand to proceed.
Warning - For potential issues:
> [!WARNING]
> Be careful! This action might have unexpected consequences.
Warning
Be careful! This action might have unexpected consequences.
Caution - For dangerous actions:
> [!CAUTION]
> Danger! This operation is irreversible and could cause data loss.
Caution
Danger! This operation is irreversible and could cause data loss.
Custom Titles
You can customize the title of any callout:
> [!WARNING]+ Custom Warning Title
> This warning has a custom title instead of just "Warning".
[!WARNING]+ Custom Warning Title
This warning has a custom title instead of just "Warning".
Legacy Syntax (Deprecated)
The old shortcode syntax still works but shows a deprecation warning:
{{</* callout note */>}}
This still works but is deprecated. Use the Markdown syntax above!
{{</* /callout */>}}
{{% callout note %}} This still works but is deprecated. Use the Markdown syntax above! {{% /callout %}}
Benefits of the New Syntax
- Portable: Works with GitHub, Obsidian, and other Markdown processors
- Standard: Uses widely-adopted Markdown alert syntax
- Clean: No Hugo-specific shortcodes needed
- Future-proof: Supported by the latest Hugo versions (0.132.0+)
- Multilingual: Callout titles are automatically translated based on your site's language
- English: "Note", "Tip", "Important", "Warning", "Caution"
- Spanish: "Nota", "Consejo", "Importante", "Advertencia", "Precaución"
- French: "Note", "Conseil", "Important", "Attention", "Prudence"
- German: "Hinweis", "Tipp", "Wichtig", "Warnung", "Vorsicht"
- Chinese: "注意", "提示", "重要", "警告", "小心"