Markdown記法ガイド

公開日：2024年8月21日 • 2分 • 266語

この記事は、Hugoのコンテンツファイルで使える基本的なMarkdown記法のサンプルだよ。新しい要素が追加されたりサポートされたりしたら、この記事も更新して例を追加していくね。

見出し

以下のHTML要素 <h2> から <h6> は、5段階のセクション見出しを表してるよ。 <h2> が一番上のレベルで、<h6> が一番低いレベルだね。<h1> は、自動生成されるページのタイトル（通常はページ内に 1つだけ）のために取っておく特別なものなんだ。

H2

H3

H4

H5

H6

段落

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

太字・斜体・コード・取り消し線・リンクのインライン書式

テキストの一部を太字にしたり、斜体にしたり、太字+斜体 にしたり、~~取り消し線~~ を引いたりできるよ。バッククォートで code みたいなインラインコードも書けるんだ。

外部サイトへのリンクは新しいタブで開くよ。内部リンクは同じタブのままだね。

引用

引用（Blockquote）要素は、他のソースから引用したコンテンツを表すときに使うよ。

出典なしの引用

Tiam, ad mint andaepu dandae nostion secatur sequo quae.
注: 引用の中でも Markdown記法 が使えるよ。

出典ありの引用

Don’t communicate by sharing memory, share memory by communicating. （メモリを共有して通信するな、通信してメモリを共有せよ。）
— Rob Pike¹

テーブル

テーブルはMarkdownの公式仕様ではサポートされてないんだけど、Hugoなら標準でサポートしてるよ。テーブルの中でフォーマットを使うこともできるんだ。

斜体	太字	コード
斜体	太字	`code`

コードブロック

コードブロックを使うと、プログラムの内容を自動でシンタックスハイライトして表示できるよ。JavaScriptが有効なら、コピーボタンも表示されるんだ。

バッククォートを使ったコードブロック

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

Highlightショートコードを使ったコードブロック

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>