Markdown スタイルガイド

この記事では、Astro のコンテンツを書くときに使える基本的な Markdown の書き方をまとめています。

見出し

HTML の <h1> から <h6> に対応する、6段階の見出しです。<h1> が最も大きく、<h6> が最も小さくなります。

H1

H2

H3

H4

H5
H6

段落

通常の段落は、空行で区切って書きます。太字やイタリック、コード などもそのまま使えます。

複数の段落を続ける場合も、段落のあいだに空行を1行入れると読みやすくなります。

画像

書き方

![代替テキスト](./画像の/相対パス)

表示例

ブログ用画像

引用

引用は > で始めます。出典は footer や cite で囲むとよいです。

出典なしの引用

書き方

> 引用したい文をここに書きます。  
> **注意:** 引用の中でも _Markdown_ が使えます。

表示例

引用したい文をここに書きます。
注意: 引用の中でも Markdown が使えます。

出典つきの引用

書き方

> メモリを共有することで伝えるな。伝えることでメモリを共有しろ。<br>
> — <cite>Rob Pike[^1]</cite>

表示例

メモリを共有することで伝えるな。伝えることでメモリを共有しろ。
— Rob Pike1

表

書き方

| イタリック   | 太字     | コード |
| ------------ | -------- | ------ |
| _イタリック_ | **太字** | `code` |

表示例

イタリック太字コード
イタリック太字code

コードブロック

書き方

行頭に3つのバッククォート ``` を書き、その次の行に言語名（html, javascript, css, markdown, typescript, bash など）を指定するとシンタックスハイライトされます。

```html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>サンプル</title>
  </head>
  <body>
    <p>テスト</p>
  </body>
</html>
```

表示例

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>サンプル</title>
  </head>
  <body>
    <p>テスト</p>
  </body>
</html>

リスト

番号付きリスト

書き方

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

表示例

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

箇条書き

書き方

- 項目1
- 項目2
- 項目3

表示例

  • 項目1
  • 項目2
  • 項目3

入れ子のリスト

書き方

- 果物
  - りんご
  - みかん
  - バナナ
- 乳製品
  - 牛乳
  - チーズ

表示例

  • 果物
    • りんご
    • みかん
    • バナナ
  • 乳製品
    • 牛乳
    • チーズ

その他の要素 — abbr, sub, sup, kbd, mark

書き方

<abbr title="Graphics Interchange Format">GIF</abbr> はビットマップ画像形式です。

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd> でセッションを終了します。

多くの<mark>サラマンダー</mark>は夜行性で、昆虫やミミズなどを狩ります。

表示例

GIF はビットマップ画像形式です。

H2O

Xn + Yn = Zn

Ctrl + Alt + Delete でセッションを終了します。

多くのサラマンダーは夜行性で、昆虫やミミズなどを狩ります。

Footnotes

  1. 上記は Rob Pike の 講演（Gopherfest, 2015年11月18日）からの引用です。 ↩