とほほのMarkdown入門

目次

Markdownとは

関連仕様書

変換ツール・ライブラリ

Markdown記法(Common Mark・GFM)

下記の例示で左側の [Markdown] の枠は編集可能です。編集すると右側の [表示] 枠に変更が反映されます。

本書では、Markdown が出力する HTML に下記のスタイルを適用しています。

table { border-collapse: collapse; }
tbody tr:nth-child(odd) { background-color: #eee; }
th, td { border: 1px solid #ccc; padding: 4px 10px; }
pre { background-color: #e8e8e8; padding: 4px; }
code { background-color: #e8e8e8; padding: 0 4px; }

見出し

1～6文字のハッシュ(#)は見出し(<h1>～<h6>)を示します。

Markdown
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
表示

シーテキスト見出し

Setext(Structure Enhanced Text) で用いられていた記法で、見出し文の次の行にイコール(=)またはハイフン(-)をひとつ以上記述すると、前の行が見出しとみなされます。イコールは <h1>、ハイフンは <h2> に展開されます。

Markdown
見出し1
=======
見出し2
-------
表示

パラグラフ(段落)

通常の文書を記述するとパラグラフ(段落)となり、HTML では <p>...</p> で囲まれて表現されます。空行があると別のパラグラフが開始されます。

Markdown
あいうえお
かきくけこ

さしすせそ
たちつてと
表示

改行

行を変更しても通常は改行しませんが、行末に2個以上のスペースを入れると改行します。下記の例では AAA の末尾にはスペースはありませんが、CCC の末尾にはスペースを2個入れています。Qiita ではスペースの有無に関わらず改行されるようです。

Markdown
AAA
BBB

CCC  
DDD
表示

水平線

3文字以上のアスタリスク(*)、ハイフン(-)、アンダーバー(_)は水平線(<hr>)を示します。

Markdown
***
---
___
表示

コメント

<!-- から --> まではコメントとして解釈され、表示されません。

Markdown
<!-- Comments... -->
表示

強調(イタリック・太字)

1連の * や _ で囲んだ文字列は <em>...</em> で囲まれ、通常イタリック体で表示されます。

Markdown
*Italic* / _Italic_
表示

2連の ** や __ で囲んだ文字列は <strong>...</strong> で囲まれ、通常太字で表示されます。

Markdown
**Strong** / __Strong__
表示

3連の *** や ___ で囲んだ文字列は <em><strong>...</em></strong> で囲まれ、通常イタリック＋太字で表示されます。

Markdown
***ItalicStrong*** / ___ItalicStrong___
表示

打消し線

~~ で囲んだ文字列は <del>...</del> で囲まれ、打消し線が表示されます。これは、Common Mark では定義されておらず、GFM による拡張です。

Markdown
~~Delete~~
表示

エスケープ

Markdown として意味を持つ文字(メタ文字)を表示するには、バックスラッシュ(\) でエスケープします。

Markdown
\*Italic\* と記述するとイタリックになります。
表示

メタ文字の前のバックスラッシュを表示するには \\ と記述します。

Markdown
\\\*AAA\\\* でメタ文字をエスケープできます。
表示

URL を <...> で囲むとリンクになります。

Markdown
<https://www.google.com/>
表示

[linkText](url) でリンクテキストを示すこともできます。

Markdown
[Google](https://www.google.com/)
表示

[linkText](url title) でリンクにマウスを乗せた時に表示されるタイトル (title="title") を指定することもできます。

Markdown
[Google](https://www.google.com/ "Google Search")
表示

下記の様な記述もできます。1行目は [Google] という参照名でリンク先とタイトルを定義しています。3行目は定義したリンクを呼び出しています。

Markdown
[Google]:https://www.google.com/ "Google Search"

検索は [Google] で。
表示

Common Mark では上記の仕様ですが、GFM による拡張では URL 形式のテキストであれば自動的にリンク表示されます。

Markdown
https://www.google.com/
表示

画像

![altMessage](url title) で画像を表示することができます。altMessage は画像の alt 属性に設定されます。title は省略可能で画像の title 属性に設定されます。

Markdown
![金魚](../image/kingyo.gif "Kingyo")
表示

引用

> で始まる行は引用(ブロッククォート)と見なされ、通常字下げで表示されます。

Markdown
下記の様に述べられています。
> うんたらかんたら
> うんたらかんたら
表示

番号無しリスト

アスタリスク(*)、ハイフン(-)、プラス記号(+) は番号無しリストを表示します。同じ階層で記号が揃っていればどの記号を用いても構いません。記号と項目名の間には 1～4個のスペースが必要です。

Markdown
* 項目1
* 項目2
* 項目3
表示

項目名のインデント位置から0～3個のインデントと記号を記述した場合、ひとつ深い階層のリストとみなします。

Markdown
* 項目1
  - 項目1-1
  - 項目1-2
* 項目2
* 項目3
表示

間に空行を含まないリストはタイトなリストと呼ばれ狭めに表示されます。間に空行を含むリストはルーズはリストと呼ばれ広めに表示されます。

Markdown
* 項目1
* 項目2
* 項目3
---
+ 項目1

+ 項目2

+ 項目3
表示

番号付きリスト

1. や 1) は番号付きリストを生成します。先頭の項目は 1. または 1) としますが、2番目以降の数値は何でも構いません。

Markdown
1. 項目1
1. 項目2
1. 項目3

1) 項目1
1) 項目2
1) 項目3
表示

項目名のインデント位置から0～3個のインデントと記号を記述した場合、ひとつ深い階層のリストとみなします。第二階層以降のリストマークを変更するにはスタイルシートを指定する必要があります。

Markdown
1. 項目1
   1) 項目1-1
   1) 項目1-2
1. 項目2
1. 項目3
表示

タスクリスト

Markdown
- [ ] Foo
- [x] Baa
表示

コードスパン

バッククォート(`) はインラインのコードスパンを示します。

Markdown
`main()` 関数は一番最初に呼び出されるエントリーポイントです。
表示

インラインコード内でバッククォート(`)を使用するには、インラインコードを2連の ``...`` で囲みます。

Markdown
``console.log(`value=${value}`);``
表示

インラインコード内でN連バッククォート(例えば2連の``)を使用する場合は、N+1連のバッククォート(例えば3連の```)でインラインコードを囲みます。

Markdown
3連バッククォートで囲めば2連バッククォート```(``)```を記述できる
表示

インデントコードブロック

ひとつ以上の空行の後、4つ以上のスペースがあると、その行から改行までがコードブロックとみなされ、<pre><code>...</code></pre> で囲まれます。

Markdown
x と y の和を求める関数の記述は下記の様になります。

    def add(x, y):
        return x + y
表示

フェンスコードブロック

3文字以上のバッククォート(```) またはチルダ(~~~)で囲まれた箇所もコードブロックとみなされ、<pre><code>...</code></pre> で囲まれます。

Markdown
x と y の和を求める関数の記述は下記の様になります。
```
def add(x, y):
    return x + y
```
表示

GFM 拡張では、``` や ~~~ の後ろに python や javascript などの言語名を記述すると class="language-xxxxx" のクラス定義が行われます。GitHub や Qiita などでは言語に応じたシンタックスハイライトが行われます。

Markdown
x と y の和を求める関数の記述は下記の様になります。
```python
def add(x, y):
    return x + y
```
表示

テーブル

バーティカルバー(|) とハイフン(-) を用いてテーブルを表示することができます。これは、Common Mark では定義されておらず、GFM による拡張です。

Markdown
| AAA | BBB |
|-----|-----|
| CCC | DDD |
| EEE | FFF |
表示

下記の様にコロン(:)を用いて、左寄せ、中央寄せ、右寄せすることができます。

Markdown
| AAAAAAAAAAAA | BBBBBBBBBBBB | CCCCCCCCCCCC |
|:-------------|:------------:|-------------:|
| Left         | Center       | Right        |
表示

HTML

Markdown の中に HTML を記述することもできます。ただし、GitHub や Qiita などのサービスではセキュリティを考慮し、使用可能な HTML に制限をかけています。以降では、Common Mark での仕様について説明します。

<pre>, <textarea>, <style>, <script> の4つの要素の場合は終了タグが現れるまでテキストは Markdown と解釈されません。

Markdown
<pre>
**AAA**

**BBB**
</pre>
表示

<div> や <blockquote> など、上記以外のブロック要素(前後に改行が行われるタイプの要素)の場合は、終了タグまたは次の空行がくるまでは Markdown と解釈されません。次の例では、**AAA** は空行の前なので Markdown と解釈されませんが、**BBB** は空行の後なので、Markdown と解釈され太字で表示されます。

Markdown
<div>
**AAA**

**BBB**
</div>
表示

<span> や <strong> などのインライン要素(前後に改行が行われないタイプの要素)の場合、開始タグと同じ行にテキストが書かれた場合はインライン記述と見なされ、終了タグが出現するまで Markdown と見なされます。下記の例では **AAA**, **BBB**, **CCC** はインライン記述と見なされ、Markdown として扱われます。

Markdown
<span>**AAA**
**BBB**

**CCC**</span>
表示

開始タグと同じ行にテキストが記述されない場合はブロック記述とみなされ、ブロック要素と同様、終了タグまたは次の空行がくるまで Markdown とみなされません。下記の例で **DDD** は空行の前なので Markdown と見なされず、**EEE** は空行の後なので Markdown と見なされます。

Markdown
<span>
**DDD**

**EEE**
</span>
表示

その他、<! ... >, <? ... ?>, <![CDATA[ ... ]]> を記述することもできますが、あまり使用されていません。

Markdown
<!DOCTYPE html>

<?php
echo "Hello world!";
?>

<![CDATA[
  if (a == 3 && b == 5) { alert("Hello World"); }
]]>
表示

Markdown記法(GitHub・Qiita拡張)

本章では、Common Mark や GFM には含まれていませんが、GitHub や Qiita が独自に拡張している記法について説明します。本書で使用している marked.js は未対応のため、[表示] 枠は疑似的に表示しています。[Markdown] 枠を編集することはできません。

フットノート(脚注)

GitHub や Qiita では下記の様な記法でフットノート(脚注)を表示することができます。脚注の説明は文書の末尾に表示されます。

Markdown
GitHub では GFM[^1] を採用しています。

[^1]: GFM: GitHub Flavor Markdown
表示
GitHub では GFM[1] を採用しています。
    :
    :
1. GFM: GitHub Flavor Markdown ↩

色表示

Qiita ではコードの中に色を表す記述があると、末尾に実際の色を表示してくれます。

Markdown
`#f00`
`#ff0000`
`rgb(255,0,0)`
`rgba(255,0,0,1)`
`hsl(0, 100%, 50%)`
`hsla(0, 100%, 50%, 1)`
表示
#f00■
#ff0000■
rgb(255,0,0)■
rgba(255,0,0,1)■
hsl(0, 100%, 50%)■
hsla(0, 100%, 50%, 1)■

情報・警告・アラート

GitHub では下記の様な警告などを表示することができます。

Markdown
> [!NOTE]
> 注記...

> [!TIP]
> ヒント...

> [!IMPORTANT]
> 重要...

> [!WARNING]
> 警告...

> [!CAUTION]
> 注意...
表示
Note
注記...
Tip
ヒント...
Important
重要...
Warning
警告...
Caution
注意...

Qiita では下記の様な情報・警告・アラートを表示することができます。

Markdown
:::note info
情報...
:::

:::note warn
警告
:::

:::note alert
アラート
:::
表示
情報
警告
アラート

絵文字

GitHub や Qiita では :...: で絵文字を表示することができます。使用可能な絵文字の一覧は下記を参照してください。

Markdown
:smile:
表示
😄

数式

GitHub や Qiita では LaTeX 形式の数式を表示することができます。$...$ はインラインの数式を記述します。

Markdown
数式: $\sqrt{3x-1}+(1+x)^2$
表示
数式: 3x-1 + (1+x)2

$$...$$ は GitHub ではインライン形式、Qiita ではブロック形式の数式となります。

Markdown
数式は下記の様になります。
$$\sqrt{3x-1}+(1+x)^2$$
表示
数式は下記の様になります。

     3x-1 + (1+x)2

```math とすると GitHub でも Qiita でもブロック形式の数式となります。

Markdown
数式は下記の様になります。
```math
\sqrt{3x-1}+(1+x)^2
```
表示
数式は下記の様になります。

     3x-1 + (1+x)2

PlantUML

Qitta では ```plantuml で PlantUML を使用した UML図を表示することができます。

Markdown
```plantuml
Client->Server : Hello!
```
表示

Mermaid

Qitta では ```mermaid で Mermaid を使用したチャートを表示することができます。

Markdown
```mermaid
graph TD;
    A-->B;
    A-->C;
```
表示
graph TD; A-->B; A-->C;
Copyright (C) 2025 杜甫々
https://www.tohoho-web.com/ex/markdown.html