Markdown 早見表

このページでは、 Catalpa で使用できる Markdown 記法を紹介します。Catalpa は Markdown プロセッサーとして flexmark を採用していますので、 flexmark のサポートしている Markdown 記法を使用することができます。flexmark は CommonMark Spec 0.28 に準拠するように設計されています。

見出し

行頭を # で始めると見出しになります。出力されるタグは # の数に応じて、 <h1> ～ <h6> となります。見出しの外観は CSS によって装飾されます。

# 見出しレベル 1

## 見出しレベル 2

### 見出しレベル 3

#### 見出しレベル 4

##### 見出しレベル 5

###### 見出しレベル 6

見出しレベル 1 と見出しレベル 2 には、タイトルの下部に = または - で線を引く記法も使えます。

見出しレベル 1
==============

見出しレベル 2
--------------

改行

行末に半角スペースを 2 つ置くと強制改行できます。（下記では半角スペースを水色のアンダースコア␣で表示しています。）

1行目の文章␣␣
2行目の文章

文字装飾

文字を 1 つのアスタリスク * （もしくは 1 つのアンダースコア _）で囲むとイタリック表示になります。出力されるタグは <i> ではなく、 <em> です。また、メイリオなどイタリック書体を持たないフォントでは効果がありません。

*イタリック*

文字を 2 つのアスタリスク * （もしくは 2 つのアンダースコア _）で囲むとボールド表示になります。出力されるタグは <b> ではなく、 <strong> です。

**ボールド**

文字を 3 つのアスタリスク * （もしくは 3 つのアンダースコア _）で囲むとイタリック・ボールド表示になります。出力されるタグは <em><strong> です。

***イタリック・ボールド***

文字を 2 つのチルダ ~ で囲むと打消し線が表示されます。出力されるタグは <del> です。

~~打消し線~~

表示例

~~打消し線~~

文字を 1 つのバッククォート ` で囲むとインライン・コードとして表示されます。出力されるタグは <code> です。

`コード`

表示例

コード

文字を [" と "] で囲むとメニューボタンの外観で表示されます。出力されるタグは button クラス属性の付いた <samp> です。

["ファイル"]

表示例

ファイル → 開く を選択して OK ボタンを押下します。

文字を [' と '] で囲むとキーボタンの外観で表示されます。出力されるタグは <kbd> です。

['Ctrl']

表示例

Ctrl + V を押すとクリップボードの内容がペーストされます。

文字をシングルクォート ' で囲むと、開始が ‘ に、終了が ’ に変換されます。

'シングルクォート'

表示例

‘シングルクォート’

文字をダブルクォート " で囲むと、開始が “ に、終了が ” に変換されます。

"ダブルクォート"

表示例

“ダブルクォート”

文字を << と >> で囲むと、開始が « に、終了が » に変換されます。

<<アングルクォート>>

表示例

«アングルクォート»

3 つのピリオド ... が … に変換されます。

続く...

表示例

続く…

2 つのハイフン -- が – に変換されます。

--

表示例

–

行頭に数字と . を付けると番号付きリストになります。先頭行の番号は指定した数値になります。2 行目以降の番号は指定した数値ではなく自動的に連番となります。（たとえば、先頭行を 4. とした場合、番号は必ず 4, 5, 6, …と振られていきます。）

1. 番号付きリストアイテム 1
2. 番号付きリストアイテム 2
3. 番号付きリストアイテム 3

表示例

番号付きリストアイテム 1
番号付きリストアイテム 2
番号付きリストアイテム 3

2 つ以上の半角スペース（またはタブ）で字下げすることにより、リストを入れ子にすることができます。入れ子にするリストの行頭の記号を変えても大丈夫です。

* 大分類1
    + 中分類A
        - 小分類w
        - 小分類x
    + 中分類B
        - 小分類y
* 大分類2
    + 中分類C
        - 小分類z

表示例

大分類 1
- 中分類 A
  - 小分類 w
  - 小分類 x
- 中分類 B
  - 小分類 y
大分類 2
- 中分類 C
  - 小分類 z

タスク・リスト

リストに [x] または [ ] を加えるとタスク・リストになります。[x] にはタスクが完了したチェックマークが表示されます。[ ] にはタスクが完了していない未完了マークが表示されます。表示されるマークは CSS でカスタマイズ可能です。

* [x] 完了したタスク1
* [ ] 未完了のタスク
* [x] 完了したタスク2

表示例

完了したタスク 1
未完了のタスク
完了したタスク 2

定義リスト

2 行目の行頭をコロン : にして 1 つ以上の半角スペース（またはタブ）を続けると、定義リストになります。出力されるタグは <dl>、 <dt>、 <dd> です。: の直前の行が定義語 <dt>、 : 以降が定義内容 <dd> になります。複数の定義を並べる場合は空行を挟みます。

イチゴ
:   バラ科の多年草。食用として供されている部分は花托であり
    果実ではない。イチゴにとっての果実は一見して種子に見える
    一粒一粒であり、正確には痩果という。

ブドウ
:   ブドウ科のつる性落葉低木である。また、その果実のこと。
    葉は両側に切れ込みのある15-20cmほどの大きさで、
    穂状の花をつける。

表示例

イチゴ: バラ科の多年草。食用として供されている部分は花托であり果実ではない。イチゴにとっての果実は一見して種子に見える一粒一粒であり、正確には痩果という。
ブドウ: ブドウ科のつる性落葉低木である。また、その果実のこと。葉は両側に切れ込みのある 15-20cm ほどの大きさで、穂状の花をつける。

リンク

以下の例のように [ ] と ( ) を組み合わせてリンクを作成できます。[ ] にリンク・テキストを、 ( ) 内にリンク URL を記述します。URL に続けて文字列を指定するとマウスカーソルを合わせたときにホバー表示されます。

[Link Text](relative/path/other.html)
[Click Here](/root/path/other.html)
[Google](http://www.google.co.jp/)
[Google](http://www.google.co.jp/ "Hover Text")

[ ]: ではじまる行はリンク定義になります。リンク定義は同じリンク URL を繰り返し使う場合に便利です。同じファイル内の任意の場所で定義できます。リンク定義自体は表示されません。[ ] の中のテキストがリンク ID になります。

[YAHOO_LINK_ID]: http://www.yahoo.co.jp/
[Amazon]: http://www.amazon.co.jp/ "hover text"

リンクが定義されている場合、以下のように URL の代わりにリンク ID を指定してリンクを作成することができます。1 つめの [ ] にリンクテキスト、 2 つめの [ ] に定義したリンク ID を指定します。リンク ID を省略して [] とした場合（または 2 つめの [] を省略した場合）リンク ID としてリンクテキストが使用されます。

[Yahoo][YAHOO_LINK_ID]
[Amazon][]
[Amazon]

リンク先を新しいウィンドウまたはタブで開くようにする場合は、 {target="_blank"} を追加します。

[Google](http://www.google.co.jp/){target="_blank"}
[Google](http://www.google.co.jp/ "Hover Text"){target="_blank"}

リンクテキストとしてリンク URL をそのまま使う場合は URL を < と > で囲みます。<、 > の代わりに [、 ] を使うこともできます。

<http://www.example.com/>
[http://www.example.com/]

メールアドレスを < と > で囲むと、メーラーを起動するための mailto スキームのリンクになります。メールアドレスを指定する場合は [、 ] を使うことはできません。

<nobody@example.com>

画像

リンク書式の先頭に ! を付けると画像になります。

![](relative/path/image.png)
![](/root/path/image.png)
![](http://www.example.com/image.png)
![](http://www.example.com/image.png "Hover Text")
![Alt Text](http://www.example.com/image.png "hover text")

リンクのテキストに画像を指定すると画像リンクになります。

[![](img/sample.png)](http://www.example.com/)

段落に画像のみが含まれている場合、画像は中央寄せで表示されます。

![](img/sample.png)

表示例

同じ段落内の画像は横に並べて表示されます。

![](img/sample.png)
![](img/sample.png)

表示例

空行を入れて段落を分けると画像は横に並ばなくなります。

![](img/sample.png)

![](img/sample.png)

表示例

{.left} や {.right} を付加することで、画像を左寄せまたは右寄せで表示できます。間に必ず 1 つ以上の半角スペースを入れる必要があります。

![](img/sample.png) {.right}

表示例

{.border} を付加することで、画像にボーダー・ラインを付けることができます。間に半角スペースを入れずに詰めて記述する必要があります。

![](img/sample.png){.border}

表示例

{.shadow} を付加することで、画像にドロップ・シャドウを付けることができます。間に半角スペースを入れずに詰めて記述する必要があります。

![](img/sample.png){.shadow}

表示例

水平線

3 つ以上の - （または *）と任意の数の半角スペースで構成される行は水平線になります。出力されるタグは <hr> です。

---

- - - -

-- -- -- -- --

***

** ** **

*************

テーブル

以下の記述でテーブルを表示することができます。2 行目の罫線にコロンを : 含めることで、左寄せ、右寄せ、中央寄せを制御できます。左側に : を配置すると左寄せ、右側に : を配置すると右寄せ、左側と右側の両方に : を配置すると中央寄せになります。: を省略すると左寄せになります。

| 列 1 | 列 2 (左寄せ) | 列 3 (中央) | 列 4 (右寄せ) |
|------|:--------------|:-----------:|--------------:|
| 1    | Apple         | US          |      $604.30B |
| 2    | Google        | US          |      $518.92B |
| 3    | Microsoft     | US          |      $436.83B |

表示例

列 1	列 2 (左寄せ)	列 3 (中央)	列 4 (右寄せ)
1	Apple	US	$604.30B
2	Google	US	$518.92B
3	Microsoft	US	$436.83B

ヘッダー行のないテーブルを作成することもできます。

|------|:--------------|:-----------:|--------------:|
| 1    | Apple         | US          |      $604.30B |
| 2    | Google        | US          |      $518.92B |
| 3    | Microsoft     | US          |      $436.83B |

表示例

1	Apple	US	$604.30B
2	Google	US	$518.92B
3	Microsoft	US	$436.83B

テーブルは既定で中央に表示されますが、 {.left} または {.right} を付加することでテーブルの表示を左または右に寄せることができます。

| 列 1 | 列 2 (左寄せ) | 列 3 (中央) | 列 4 (右寄せ) |
|------|:--------------|:-----------:|--------------:|
| 1    | Apple         | US          |      $604.30B |
| 2    | Google        | US          |      $518.92B |
| 3    | Microsoft     | US          |      $436.83B |
{.left}

表示例

列 1	列 2 (左寄せ)	列 3 (中央)	列 4 (右寄せ)
1	Apple	US	$604.30B
2	Google	US	$518.92B
3	Microsoft	US	$436.83B

以下のように改行を入れて記述することもできます。セルの中に長い文章を書く時に便利です。各行は | または複数の半角スペースで始まる必要があります。

| 列 1 | 列 2 (左寄せ) | 列 3 (中央) | 列 4 (右寄せ) |
|------|:--------------|:-----------:|--------------:|
| 1
| Apple
| US
| $604.30B
|
| 2
| Google
| US
| $518.92B
|
| 3
| Microsoft
| US
| $436.83B
|

表示例

列 1	列 2 (左寄せ)	列 3 (中央)	列 4 (右寄せ)
1	Apple	US	$604.30B
2	Google	US	$518.92B
3	Microsoft	US	$436.83B

引用

行頭を > にすると引用になります。

> 吾輩は猫である。名前はまだ無い。どこで生れたか
> とんと見当がつかぬ。何でも薄暗いじめじめした所で
> ニャーニャー泣いていた事だけは記憶している。
> 吾輩はここで始めて人間というものを見た。

表示例

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

引用は入れ子にすることができます。

> 『吾輩は猫である』は、夏目漱石の長編小説である。1905年1月、
> 『ホトトギス』に発表され、好評を博したため、翌1906年8月まで
> 継続した。冒頭は次の通り。
> 
> > 吾輩は猫である。名前はまだ無い。どこで生れたか
> > とんと見当がつかぬ。何でも薄暗いじめじめした所で
> > ニャーニャー泣いていた事だけは記憶している。

表示例

『吾輩は猫である』は、夏目漱石の長編小説である。1905 年 1 月、『ホトトギス』に発表され、好評を博したため、翌 1906 年 8 月まで継続した。冒頭は次の通り。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

コード・ブロック

行頭に 4 つのスペースもしくはタブを入れるとコードブロックとして認識されます。

    int main(int argc, char* argv[])
    {
        printf("Hello, World!!¥n");
        return 0;
    }

3 つのバッククォート ```、または、 3 つのチルダ ~~~ で囲んだ場合もコードブロックとして認識されます。

```
int main(int argc, char* argv[])
{
    printf("Hello, World!!¥n");
    return 0;
}
```

``` または ~~~ を使う形式では言語名を指定することができます。いくつかの言語では自動的にコード・ハイライトが適用され色が着きます。

```java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

表示例

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

言語名の後に半角スペースを置いてタイトルを指定できます。

```java Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

表示例

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

{.copy} を付加するとコード・ブロックの内容をクリップボードにコピーするボタンが表示されます。

```java Hello.java {.copy}
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

表示例

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

{.line-number} を付加すると行番号が表示されます。

行番号は必ず 1 から始まります。
開始行番号を指定することはできません。
行番号の最大値は 999 です。
1,000 行以上のコードに {.line-number} を指定しないでください。

```java Hello.java {.line-number .copy}
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

表示例

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

{.light} を付加するとコードブロックがライトカラーになります。（指定しない場合の既定値はダークカラーです。）

```java Hello.java {.light .line-number .copy}
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

表示例

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

コード・ブロックは既定で自動的に行を折り返します。

```java Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("コードブロックの横幅に収まらない長い行は自動的に右端で折り返されます。");
        return;
    }
}
```

表示例

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("コードブロックの横幅に収まらない長い行は自動的に右端で折り返されます。");
        return;
    }
}

{.scroll} を付加すると自動折り返しが無効になり、必要に応じて水平スクロールバーが表示されるようになります。

```java Hello.java {.scroll}
public class Hello {
    public static void main(String[] args) {
        System.out.println("{.scroll}を指定すると折り返しが無効になりコードブロックに水平スクロールバーが表示されるようになります。");
        return;
    }
}
```

表示例

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("{.scroll}を指定すると折り返しが無効になりコードブロックに水平スクロールバーが表示されるようになります。");
        return;
    }
}

コード・ハイライティングに対応している言語名は以下の通りです。

apache / apacheconf
bash / sh / zsh
cpp / c / cc / h / c++ / h++ / hpp
cs / csharp
css
diff / patch
groovy
http / https
ini / toml
java / jsp
javascript / js / jsx
json
makefile / mk / mak
objectivec / mm / objc / obj-c
perl / pl / pm
php / php3 / php4 / php5 / php6
python / py / gyp
ruby / rb / gemspec / podspec / thor / irb
scala
shell / console
xml / html / xhtml / rss / atom / xjb / xsd / xsl / plist
yaml / yml

付箋

定義リストに {.note}、 {.tip}、 {.info}、 {.warning}、 {.caution} を付加すると、付箋のような外観で表示されます。長い文章は自動的に折り返されます。任意の位置で折り返したい場合は行末に半角スペースを 2 つ記述します。（下記では半角スペースを水色のアンダースコア␣で表示しています。）

{.note} メモ
:   Markdownはとても便利です。␣␣
    複数行に分けて書くこともできます。

表示例

メモのタイトル: Markdown はとても便利です。
複数行に分けて書くこともできます。

ヒント: {.tip} を指定するとこうなります。

情報: {.info} を指定するとこうなります。

注意: {.warning} を指定するとこうなります。

警告: {.caution} を指定するとこうなります。

付箋のタイトルを省略するとアイコン表示なしの付箋になります。

{.info}
:   これはアイコンなしの付箋です。__
    余白も小さくコンパクトになります。

表示例

: これはアイコンなしの付箋です。
余白も小さくコンパクトになります。

属性

{ } を使って HTML 要素に任意の属性を付加することができます。

[Google](http://www.google.co.jp/){target="_blank"}

上記はリンク先を新しいウィンドウで開く例です。{target="_blank"} が付加されていることで、直前の Markdown を変換した結果の HTML 要素に属性が付加されます。

{target="_blank"} を指定しなかった場合の出力

<a href=http://www.google.co.jp/">Google</a>

{target="_blank"} を指定した場合の出力

<a href=http://www.google.co.jp/" target="_blank">Google</a>

{attr="value"} の形式で属性名（attr）と属性値（value）を指定します。

id 属性を指定する場合は、 {id="myname"} の代わりに {#myname} と短縮して書くこともできます。
class 属性を指定する場合は、 {class="foobar"} の代わりに {.foobar} と短縮して書くこともできます。
複数の属性を指定する場合は半角スペースで区切ります。
（例） {attr1="valueA" attr2="valueB" #myname .foobar}

前述の定義リストを付箋の外観に変える {.note} という記述は、実は定義リストの <DL> 要素に class="note" 属性を追加しているのです。このクラス属性に合わせて外観が変わるように CSS が定義されていて外観が付箋のように変化します。

これを自分で応用して、 HTML 要素に任意の属性を追加して、 CSS と連動して外観を変えるといったこともできます。

HTML

Markdown の中に直接 HTML を書くこともできます。

<div style="text-align:center">
  Happy birthday!
</div>

表示例

Happy birthday!

ただし、 HTML タグの中で Markdown 記法を使うことはできません。下記の例では、 Markdown 記法の ** を使っていますが、ボールド表示にはならず、そのまま ** が表示されます。

<div style="text-align:center">
  **Happy** birthday!
</div>

表示例

**Happy** birthday!

空行を入れて HTML タグと Markdown 記述の段落を分けると、 Markdown 記法が有効になります。ただし、 <p> タグが挿入されることに注意してください。既定で <p> タグはブロック要素です。

<div style="text-align:center">

  **Happy** birthday!

</div>

表示例

Happy birthday!