Markdown

Hugo はテキストの書式設定やリスト作成などに Markdown 構文をサポートしています。このページでは、最も一般的な Markdown 構文の例を紹介します。

Markdown の例

テキストのスタイリング

スタイル構文出力
太字**太字テキスト****太字テキスト**太字テキスト
斜体*斜体テキスト**斜体テキスト*斜体テキスト
打ち消し線~~打ち消し線テキスト~~~~打ち消し線テキスト~~打ち消し線テキスト
下付き文字<sub></sub>これは<sub>下付き文字</sub>ですこれは下付き文字です
上付き文字<sup></sup>これは<sup>上付き文字</sup>ですこれは上付き文字です

ブロッククォート

引用元付きのブロッククォート

メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。
Rob Pike1

Markdown
> メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
> — <cite>Rob Pike[^1]</cite>

[^1]: 上記の引用は、2015年11月18日のGopherfestでのRob Pikeの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。

アラート

New in v0.9.0

アラートは、重要な情報を強調するために使用できるブロッククォート構文を基にしたMarkdown拡張機能です。 GitHubスタイルのアラートがサポートされています。 最新バージョンのHextraとHugo v0.146.0以降を使用していることを確認してください。

Note

コンテンツをざっと見る際にもユーザーが知っておくべき有用な情報。

Tip

物事をより良く、または簡単に行うための役立つアドバイス。

Important

ユーザーが目標を達成するために知っておく必要がある重要な情報。

Warning

問題を回避するためにユーザーがすぐに対処する必要がある緊急情報。

Caution

特定のアクションによるリスクやネガティブな結果についての警告。

Markdown
> [!NOTE]
> コンテンツをざっと見る際にもユーザーが知っておくべき有用な情報。

> [!TIP]
> 物事をより良く、または簡単に行うための役立つアドバイス。

> [!IMPORTANT]
> ユーザーが目標を達成するために知っておく必要がある重要な情報。

> [!WARNING]
> 問題を回避するためにユーザーがすぐに対処する必要がある緊急情報。

> [!CAUTION]
> 特定のアクションによるリスクやネガティブな結果についての警告。

テーブル

テーブルはコアMarkdown仕様の一部ではありませんが、Hugoはデフォルトでサポートしています。

名前年齢
Bob27
Alice23
Markdown
| 名前  | 年齢 |
| :---- | :-- |
| Bob   | 27  |
| Alice | 23  |

テーブル内のインラインMarkdown

斜体太字コード
斜体太字コード
Markdown
| 斜体       | 太字       | コード     |
| :-------- | :-------- | :-------- |
| _斜体_     | **太字**   | `コード`   |

コードブロック

リスト

順序付きリスト

  1. 最初の項目
  2. 2番目の項目
  3. 3番目の項目
Markdown
1. 最初の項目
2. 2番目の項目
3. 3番目の項目

順序なしリスト

  • リスト項目
  • 別の項目
  • さらに別の項目
Markdown
* リスト項目
* 別の項目
* さらに別の項目

ネストされたリスト

  • 果物
    • りんご
    • オレンジ
    • バナナ
  • 乳製品
    • 牛乳
    • チーズ
Markdown
- 果物
  - りんご
  - オレンジ
  - バナナ
- 乳製品
  - 牛乳
  - チーズ

画像

風景

Markdown
![風景](https://picsum.photos/800/600)

キャプション付き:

風景
Lorem Picsum

Markdown
![風景](https://picsum.photos/800/600 "Lorem Picsum")

より高度な機能が必要な場合は、Hugoの組み込みFigureショートコードを使用してください。

設定

HugoはMarkdown解析にGoldmarkを使用しています。 Markdownのレンダリング設定はhugo.yamlmarkup.goldmarkで行えます。 以下はHextraのデフォルト設定です:

hugo.yaml
markup:
  goldmark:
    renderer:
      unsafe: true
  highlight:
    noClasses: false

その他の設定オプションについては、Hugoドキュメントのマークアップ設定を参照してください。

学習リソース


  1. 上記の引用は、2015年11月18日のGopherfestでのRob Pikeの講演から抜粋したものです。 ↩︎

最終更新日