Hugo Blox で使えるマークダウン拡張一覧

Hugo Blox は通常のマークダウン拡張と、ショートコードという拡張機能を提供しています。また Hugo の持つ拡張機能も受け継いでいますので色々できます。

👽 ショートコードのドキュメント

https://gohugo.io/content-management/shortcodes/
https://gohugo.io/content-management/syntax-highlighting/

👽 ステップ

{{% steps %}}

### Step 1

お湯を沸かします

### Step 2

お肉をぶち込みます

{{% /steps %}}

Step 1

お湯を沸かします

Step 2

お肉をぶち込みます

👽 アラート

{{% callout note %}}
This is a note.
{{% /callout %}}

This is a note.

{{% callout warning %}}
This is a warning.
{{% /callout %}}

This is a warning.

👽SNS・動画埋め込み

URL に含まれるパラメーターを指定します。https://youtu.be/8XwGvJCz7nE ような Youtube の URL の場合、以下のように書きます。

{{< youtube 8XwGvJCz7nE >}}

その他

{{< instagram P2MOCxOWiQN >}}

{{< twitter user="HogeHoge" id="12345678901234567890" >}}

{{< gist user 50a7482715eac222e230d1e64dd9a89b >}}

{{< video src="hogehoge.mp4" controls="yes" >}}

{{< audio src="hogehoge.mp3" >}}

👽 プルダウン

{{< spoiler text="続きを見る" >}}
こちらは有料コンテンツです
{{< /spoiler >}}

続きを見る

こちらは有料コンテンツです

👽 カード

{{< card title="Card" >}}

Card

{{< card url="/" title="Card with URL" icon="academic-cap" >}}

Card with URL

{{< cards >}}
  {{< card title="Card 1" >}}
  {{< card title="Card 2" >}}
{{< /cards >}}

Card 1 Card 2

👽LaTeX

$\LaTeX$

$\LaTeX$

$$
x^2 + y^2 = 1
$$

$$ x^2 + y^2 = 1 $$

👽 マインドマップ (markmap)

```markmap {height="200px"}
- Robot
  - Hardware
  - Software
  - Firmware
```

- Robot
  - Hardware
  - Software
  - FirmWare

👽 グラフ (mermaid)

```mermaid
graph LR
Parent --> ChildA
Parent --> ChildB
```

graph LR Parent --> ChildA Parent --> ChildB

👽Todo リスト

- [x] English
  - [x] Listening
  - [ ] Writhing
- [ ] Math

English
- Listening
- Writhing
Math

👽 フロントマター

テンプレート

---
title:
summary:
date:
tags:
  -
  -
  -
---

記入例

---
title: タイトルです！
summary: 概要です！ホームのカードに表示。記事には表示されない。
date: 2024-10-19
tags:
  - C++
  - GitHub Actions
  - CI/CD
---

👽 アイコン

{{< card title="" icon="" >}}