Markdown

Hugoは、テキストのフォーマットやリストの作成などにMarkdown構文をサポートしています。このページでは、最も一般的なMarkdown構文の例をいくつか紹介します。

Markdownの例

テキストのスタイル

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

ブロッククォート

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

メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。
ロブ・パイク1

Markdown
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
> — <cite>ロブ・パイク[^1]</cite>

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

アラート

New in v0.9.0

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

Note

ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。

Tip

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

Important

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

Warning

問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。

Caution

特定のアクションのリスクやネガティブな結果についてのアドバイス。

Markdown
> [!NOTE]
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。

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

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

> [!WARNING]
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。

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

テーブル

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

名前年齢
ボブ27
アリス23
Markdown
|   名前 | 年齢  |
|--------|------|
|   ボブ | 27   |
|  アリス | 23   |

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

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

コードブロック

リスト

順序付きリスト

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

順序なしリスト

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

ネストされたリスト

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

画像

風景

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

キャプション付き:

風景
Unsplashの風景

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

設定

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

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

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

学習リソース


  1. 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの講演から抜粋したものです。 ↩︎

最終更新日