|
| 1 | +--- |
| 2 | +title: Learn JavaScript |
| 3 | +summary: Easily learn JavaScript in 10 minutes! |
| 4 | +date: 2023-10-24 |
| 5 | +type: docs |
| 6 | +math: false |
| 7 | +tags: |
| 8 | + - JavaScript |
| 9 | +image: |
| 10 | + caption: 'Embed rich media such as videos and LaTeX math' |
| 11 | +content_meta: |
| 12 | + content_type: 'Tutorial' |
| 13 | + difficulty: 'Beginner' |
| 14 | + prerequisites: ['HTML'] |
| 15 | + trending: true |
| 16 | +--- |
| 17 | + |
| 18 | +[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. |
| 19 | + |
| 20 | +**Embed videos, podcasts, code, LaTeX math, and even test students!** |
| 21 | + |
| 22 | +On this page, you'll find some examples of the types of technical content that can be rendered with Hugo Blox. |
| 23 | + |
| 24 | +## Video |
| 25 | + |
| 26 | +Teach your course by sharing videos with your students. Choose from one of the following approaches: |
| 27 | + |
| 28 | +{{< youtube D2vj0WcvH5c >}} |
| 29 | + |
| 30 | +**Youtube**: |
| 31 | + |
| 32 | + {{</* youtube w7Ft2ymGmfc */>}} |
| 33 | + |
| 34 | +**Bilibili**: |
| 35 | + |
| 36 | + {{</* bilibili id="BV1WV4y1r7DF" */>}} |
| 37 | + |
| 38 | +**Video file** |
| 39 | + |
| 40 | +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: |
| 41 | + |
| 42 | + {{</* video src="my_video.mp4" controls="yes" */>}} |
| 43 | + |
| 44 | +## Podcast |
| 45 | + |
| 46 | +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: |
| 47 | + |
| 48 | + {{</* audio src="ambient-piano.mp3" */>}} |
| 49 | + |
| 50 | +Try it out: |
| 51 | + |
| 52 | +{{< audio src="ambient-piano.mp3" >}} |
| 53 | + |
| 54 | +## Test students |
| 55 | + |
| 56 | +Provide a simple yet fun self-assessment by revealing the solutions to challenges with the `spoiler` shortcode: |
| 57 | + |
| 58 | +```markdown |
| 59 | +{{</* spoiler text="👉 Click to view the solution" */>}} |
| 60 | +You found me! |
| 61 | +{{</* /spoiler */>}} |
| 62 | +``` |
| 63 | + |
| 64 | +renders as |
| 65 | + |
| 66 | +{{< spoiler text="👉 Click to view the solution" >}} You found me 🎉 {{< /spoiler >}} |
| 67 | + |
| 68 | +## Math |
| 69 | + |
| 70 | +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. |
| 71 | + |
| 72 | +To render _inline_ or _block_ math, wrap your LaTeX math with `{{</* math */>}}$...${{</* /math */>}}` or `{{</* math */>}}$$...$${{</* /math */>}}`, respectively. |
| 73 | + |
| 74 | +{{% callout note %}} |
| 75 | +We wrap the LaTeX math in the Hugo Blox _math_ shortcode to prevent Hugo rendering our math as Markdown. |
| 76 | +{{% /callout %}} |
| 77 | + |
| 78 | +Example **math block**: |
| 79 | + |
| 80 | +```latex |
| 81 | +{{</* math */>}} |
| 82 | +$$ |
| 83 | +\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} |
| 84 | +$$ |
| 85 | +{{</* /math */>}} |
| 86 | +``` |
| 87 | + |
| 88 | +renders as |
| 89 | + |
| 90 | +{{< math >}} |
| 91 | +$$\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}$$ |
| 92 | +{{< /math >}} |
| 93 | + |
| 94 | +Example **inline math** `{{</* math */>}}$\nabla F(\mathbf{x}_{n})${{</* /math */>}}` renders as {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}. |
| 95 | + |
| 96 | +Example **multi-line math** using the math linebreak (`\\`): |
| 97 | + |
| 98 | +```latex |
| 99 | +{{</* math */>}} |
| 100 | +$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ |
| 101 | +1-p_{0}^{*} & \text{if }k=0.\end{cases}$$ |
| 102 | +{{</* /math */>}} |
| 103 | +``` |
| 104 | + |
| 105 | +renders as |
| 106 | + |
| 107 | +{{< math >}} |
| 108 | + |
| 109 | +$$ |
| 110 | +f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ |
| 111 | +1-p_{0}^{*} & \text{if }k=0.\end{cases} |
| 112 | +$$ |
| 113 | + |
| 114 | +{{< /math >}} |
| 115 | + |
| 116 | +## Code |
| 117 | + |
| 118 | +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. |
| 119 | + |
| 120 | + ```python |
| 121 | + import pandas as pd |
| 122 | + data = pd.read_csv("data.csv") |
| 123 | + data.head() |
| 124 | + ``` |
| 125 | + |
| 126 | +renders as |
| 127 | + |
| 128 | +```python |
| 129 | +import pandas as pd |
| 130 | +data = pd.read_csv("data.csv") |
| 131 | +data.head() |
| 132 | +``` |
| 133 | + |
| 134 | +## Inline Images |
| 135 | + |
| 136 | +```go |
| 137 | +{{</* icon name="python" */>}} Python |
| 138 | +``` |
| 139 | + |
| 140 | +renders as |
| 141 | + |
| 142 | +{{< icon name="python" >}} Python |
| 143 | + |
| 144 | +## Did you find this page helpful? Consider sharing it 🙌 |
0 commit comments