Markdown 記法の早見表

プレビューは marked.js で解析しており、GitHub Flavored Markdown(GFM)に対応しています。 以下はそのままエディターに貼り付けて試せます。

このページの目次

この目次はファイルの先頭に手で書いたもので、エディターが自動生成する機能ではありません。 各行がこのページの見出しへのリンクです。書き方は目次とアンカーを参照してください。

見出し

# 見出し 1
## 見出し 2
### 見出し 3

見出しには自動でアンカー id が付くため、文書のどこからでもその見出しへリンクできます。 目次はこの仕組みで作ります —— 目次とアンカーを参照してください。

強調

**太字** *斜体* ~~取り消し線~~ `インラインコード`
<u>下線</u>

Markdown に下線の記法はないため、ツールバーの「下線」ボタンは HTML の <u> タグを挿入します。 他の Markdown ツールでは対応していないことがあるので、この文書を別のジェネレーターに渡す予定があるなら注意してください。

リスト

- 項目
- 項目
  - 入れ子の項目(スペース 2 つでインデント)

1. 番号つき項目
2. 番号つき項目

- [x] 完了したタスク
- [ ] 未完了のタスク

リンクと画像

[表示するテキスト](https://example.com)
![代替テキスト](images/screenshot.png)

画像のパスはその文書が置かれているフォルダからの相対パスです。プレビューはブラウザ内で動くため、 ローカル画像はブラウザがそのパスに到達できる場合にだけ表示されます。完全な URL を使うか、 同じフォルダに画像を置くほうが確実です。

目次とアンカー

見出しには自動でアンカー id が付くので、文書のどこからでも [テキスト](#id) で飛べます。 そのリンクをリスト状に並べてファイルの先頭に置けば、クリックできる目次になります —— 長い文書で目的の節を探してスクロールし続ける必要がなくなります:

[インストール手順](#インストール手順)
[よくある質問](#よくある質問)

## インストール手順
## よくある質問

id は見出しの文字そのもので、次の 3 つの規則で変換されます:

規則見出し書くリンク
英字はすべて小文字に## Quick Start#quick-start
空白はハイフンに## 第 2 章#第-2-章
記号は消える## データはどこに保存されますか?#データはどこに保存されますか

日本語や中国語の見出しはそのまま id として使えます。ローマ字に直したり番号を振ったりする必要はありません。

⚠️ 3 つめが一番間違えやすいところです。、:?,・ などの記号はハイフンになるのではなく丸ごと消えます。 そのため ## Chrome・Edge だけの理由 の id は #chromeedge-だけの理由 となり、2 つの単語がつながります。 毎回計算したくなければ、見出しに記号を入れないのが一番手軽です。

同じ文書に同じ見出しが 2 つあるときは、2 つめ以降に番号が付きます:#メモ、#メモ-1、#メモ-2。

この規則は GitHub と同じなので、同じ .md を GitHub に上げても目次はそのまま機能します。 目次をクリックしてもアドレスバーに # が溜まらないため、「戻る」で見出しを 1 つずつ 遡ることにはならず、ページから普通に離脱できます。

引用と区切り線

> 引用は複数行にわたって書けます。
> 各行の先頭に記号を付けてください。

---

表

| 列 | 説明 | 数 |
| --- | :---: | ---: |
| 左寄せ | 中央 | 右寄せ |
| a | b | 3 |

区切り行のコロンで揃え方が決まります: :--- は左、:---: は中央、---: は右。 ツールバーの「表」ボタンは列数を尋ね、ヘッダー行と区切り行をまとめて挿入します。

コードブロック

コードの前後にバックティック 3 つの行を置きます。開始行には言語名を書けます。

```js
const answer = 42;
```

プレビュー内の各コードブロックの右上にはコピーボタンが出て、1 回押すとブロック全体がクリップボードに入ります。

改行

Markdown では単なる改行は改行になりません。改行するには 2 つの方法があります。

行末に半角スペース 2 つを置いて改行すると  
次の行で改行されます

または 1 行空けると、
2 つの段落になります。

Markdown にない記法を HTML で補う

Markdown には下線・蛍光ペン・コメントがありません。このエディターのプレビューは HTML をそのまま通すので、以下はすべて使えます(どれもこのエディターで実際に確認済み)。

<u>下線</u>
<mark>蛍光ペン</mark>
<kbd>Ctrl</kbd>+<kbd>S</kbd> で保存
H<sub>2</sub>O と x<sup>2</sup>

コメント:自分用のメモ、プレビューには出ない

HTML コメントで囲んだ部分はプレビューに表示されませんが、.md ファイルには残ります。 Markdown で通用するコメントの書き方はこれだけです —— // や # のような記法はありません。

<!-- ソースを開いたときだけ見える -->

この文には <!-- 隠しメモ --> が入っていますが、読者には前後の文章しか見えません。

ブロック全体、行内、複数行のいずれも使えます。消さずに一時的に無効化したいときにも便利です。

折りたたみ

<details><summary>もっと見る</summary>

隠れている内容。**ここでも Markdown 記法は有効**ですが、前後に空行が必要です。

</details>

⚠️ これらは Markdown ではなく HTML です。 このエディターでは問題ありませんが、 その .md を別のジェネレーター(静的サイト、ブログ、GitHub)に渡すと、 対応していなかったり、まるごと除去されたりすることがあります。 自分の文書の中で使うか、渡す先が対応しているか先に確認してください。

⚠️ プレビューは HTML を一切フィルタしません。書いたとおりに描画されます。 編集しているのは自分のディスク上のファイルなので、これは意図的な挙動(HTML の表現力をそのまま残す) ですが、出所の分からない HTML を貼り付けてプレビューしないでください。

このエディターが 1 つだけ足していること

ファイル先頭の YAML front matter が区切り線や見出しとして飲み込まれず、独立したカードとして表示されます。 詳細はYAML front matter。

このページの .md をダウンロード エディターで開けば、そのままサンプル文書として使えます。

← マニュアル目次へ