JavaScript | Ranulfo Bezerra

JavaScriptを学ぶ

Tue, 24 Oct 2023 00:00:00 +0000

Hugo Blox Builderは、テクニカルコンテンツ制作者にシームレスな体験を提供するように設計されています。あなたはコンテンツに集中し、このテンプレートが基盤としているHugo Blox Builderが残りの部分を処理します。

ビデオ、ポッドキャスト、コード、LaTeX数学、さらにはテスト学生を埋め込む！。

このページでは、Hugo Bloxでレンダリングできる技術系コンテンツの例をいくつかご紹介します。

動画

生徒とビデオを共有することで、コースを教えることができます。以下の方法からお選びください：

プレースホルダ_2_0

Youtube：

{{< youtube w7Ft2ymGmfc >}}.

ビリビリ：

{{< bilibili id=“BV1WV4y1r7DF” >}}}.

ビデオファイル

動画をページに追加するには、assets/media/メディアライブラリかページのフォルダに置き、_video_ショートコードで埋め込みます：

お試しください：

プレースホルダー_5_1

テスト生

spoilerショートコードを使って課題の解答を公開することで、シンプルで楽しい自己評価を提供しましょう：

プレースホルダー_10_9

としてレンダリングします。

プレースホルダ_6_2

数学

Hugo Blox Builderは、$LaTeX$ math用のMarkdown拡張機能をサポートしています。config/_default/params.yamlファイルのmathオプションを切り替えることで、この機能を有効にできます。

inline_または_block_の数式をレンダリングするには、LaTeXの数式をそれぞれ{{< math >}}$...${{< /math >}}または{{< math >}}$$...$${{< /math >}}で囲みます。

プレースホルダ_9_7 Hugoが数式をMarkdownとしてレンダリングするのを防ぐために、LaTeXの数式をHugo Blox _math_ショートコードでラップします。プレースホルダ_9_8

mathブロック**の例：

プレースホルダ_10_10

としてレンダリングする

プレースホルダ_7_3

例 inline math {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}} は $\nabla F(\mathbf{x}_{n})$ としてレンダリングされます。

数学の改行 (\\) を使用した 複数行の数学 の例：

プレースホルダー_10_11

としてレンダリングされる。

プレースホルダ_7_5

コード

Hugo Blox Builderはコードの構文をハイライトするためにHugoのMarkdown拡張機能を利用します。コードのテーマはconfig/_default/params.yamlファイルで選択できます。

プレースホルダー_10_12

としてレンダリングされます。

プレースホルダ_10_12

インライン画像

プレースホルダ_10_14

としてレンダリングする。

パイソン

このページは役に立ちましたか？シェアしてください🙌。

Learn JavaScript

Tue, 24 Oct 2023 00:00:00 +0000

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:

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, and then embedding them with the video shortcode:

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

You found me 🎉

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.

We wrap the LaTeX math in the Hugo Blox 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.

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

JavaScript | Ranulfo Bezerra

JavaScriptを学ぶ

動画

テスト生

数学

コード

インライン画像

このページは役に立ちましたか？シェアしてください🙌。

Learn JavaScript

Video

Test students

Math

Code

Inline Images

Did you find this page helpful? Consider sharing it 🙌