--- title: Learn Python summary: Easily learn Python in 10 minutes! date: 2023-10-24 type: docs math: false tags: - Python image: caption: 'Embed rich media such as videos and LaTeX math' content_meta: content_type: 'Course' difficulty: 'Intermediate' prerequisites: ['SQL'] trending: false --- [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. ## Video Teach your course by sharing videos with your students. Choose from one of the following approaches: {{< youtube D2vj0WcvH5c >}} **Youtube**: {{}} **Bilibili**: {{}} **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: {{}} ## 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: {{}} 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 {{}} You found me! {{}} ``` 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 `{{}}$...${{}}` or `{{}}$$...$${{}}`, 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**: ```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 {{< 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** `{{}}$\nabla F(\mathbf{x}_{n})${{}}` renders as {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}. 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 {{< 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 ```python import pandas as pd data = pd.read_csv("data.csv") data.head() ``` ## Inline Images ```go {{}} 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: ```markdown > [!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: ```markdown > [!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: ```markdown > [!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: ```markdown > [!WARNING] > Be careful! This action might have unexpected consequences. ``` > [!WARNING] > Be careful! This action might have unexpected consequences. **Caution** - For dangerous actions: ```markdown > [!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: ```markdown > [!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: ```markdown {{}} This still works but is deprecated. Use the Markdown syntax above! {{}} ``` {{% 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: "注意", "提示", "重要", "警告", "小心" ## Did you find this page helpful? Consider sharing it 🙌