見出し改行文字装飾リストタスク ・ リスト定義リストリンク画像水平線テーブル引用コード ・ ブロックルビ HTML 属性ボタン付箋ツリーメニューカード段落

Markdown早見表

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

見出し

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

# 見出しレベル 1

## 見出しレベル 2

### 見出しレベル 3

#### 見出しレベル 4

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

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

行末に # を追加することもできます。行頭の # の数で <h1> ～ <h6> が決まるため、 行頭と行末の # の数は一致していなくても問題ありません。

# 見出しレベル 1 #

## 見出しレベル 2 ##

### 見出しレベル 3 ###

#### 見出しレベル 4 ####

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

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

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

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

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

改行

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

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

ブランク文字 （半角スペース ・ 全角スペース ・ タブ） のみを含む行は垂直スペースになります。ブランク文字のみを含む行が 1 つの場合、 高さ 0 の垂直スペースになります。高さは 0 ですが、 前のマージンと後のマージンの相殺が無効になるため、 垂直スペースとして働きます。ブランク文字はいくつ入力しても同じです。（垂直スペースが増えることはありません。）

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

ブランク文字のみを含む行が連続で 2 つ以上になると振る舞いが変わります。最初のブランク行は高さ 0 で前後のマージン相殺を無効化する効果があります。2 つ目以降のブランク行は、 半角スペース 1 つあたり 0.25em の高さを持つ余白として働きます。半角スペース 4 つなら 0.25em × 4 = 1em の垂直スペースになります。

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

文字装飾

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

*イタリック*

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

**ボールド**

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

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

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

~~打消し線~~

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

`コード`

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

["ファイル"]

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

['Ctrl']

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

'シングルクォート'

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

"ダブルクォート"

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

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

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

続く...

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

--

リスト

行頭にアスタリスク * を付けると箇条書きリストになります。* の代わりに + や - を使うこともできます。

* 箇条書きリストアイテム 1
* 箇条書きリストアイテム 2
* 箇条書きリストアイテム 3

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

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

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

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

タスク・リスト

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

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

定義リスト

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

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

ブドウ
:   ブドウ科のつる性落葉低木である。また、その果実のこと。
    葉は両側に切れ込みのある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    | 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
|

引用

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

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

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

> 『吾輩は猫である』は、夏目漱石の長編小説である。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;
    }
}

{.dark} を付加するとコード ・ ブロックがダークカラーになります。

```java Hello.java {.dark .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;
    }
}

{.dark}、 {.light} いずれも指定しなかった場合は、 ブラウザーのダークモード設定に従って色が決まります。

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

```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

ルビ

《 と 》 で囲んだテキストは直前の単語のルビ （ふりがな） になります。

ルビ付けの対象が漢字の場合には範囲を自動的に認識します。開始位置を｜で明示することもできます。

本日は晴天《せいてん》なり。

日本語｜組版《くみはん》は奥が深い。

HTML

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

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

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

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

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

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

  **Happy** birthday!

</div>

属性

{ } を使って 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}

HTML 要素に任意の属性を追加して、 CSS と組み合わせることで外観を変えることもできます。以下、 要素ごとの属性 { } の記述位置と CSS 装飾例を紹介していきます。

ボタン

リンク要素にクラス属性 .button を指定すると外観がボタンになります。クラス属性を組み合わせることで外観を変えられます。

[ボタン](index.html){.button}

{.button .hover} で浮き上がるボタンになります。

浮き上がるボタン

{.button .round} で丸いボタンになります。

丸いボタン

{.button .round .hover} で浮き上がる丸いボタンになります。

浮き上がる丸いボタン

{.button .next} で次ページボタンになります。

次ページ次ページ次ページ

{.button .previous} で前ページボタンになります。

前ページ前ページ前ページ

.tiny、 .small、 .large、 .huge でボタンの大きさを変えられます。たとえば、 {.button .large} で大きいボタンになります。

大きいボタン

.primary、 .primary-variant、 .secondary、 .secondary-variant でボタンの色を変えられます。それぞれの色は main.css 冒頭で定義されています。たとえば、 {.button .primary} でボタンの色が --primary-color で定義された色になります。

ボタン

クラス属性は組み合わせて使うことができます。

付箋

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

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

付箋を連続で書くときは、 付箋と付箋の間にコメントタグ <!----> を配置して区切ります。タグで区切らないと連結された 1 つの付箋として表示されてしまいます。定義リストに続けて、 付箋を書くときもコメントタグを配置して区切ってください。

{.info} 情報1
:   複数の付箋を連続で書くと連結されてしまいます。

<!---->
{.info} 情報2
:   連結を防ぐためには付箋と付箋の間にコメントタグを挟みます。

付箋のタイトルを省略することもできます。

{.info}
:   これはタイトルなしの付箋です。__
    コンパクトになります。

.primary、 .primary-variant、 .secondary、 .secondary-variant を指定するとタイトルの背景色が変わります。

タイトル

プライマリーカラーの付箋です。

.deg-0 ～ .deg-9 を指定するとタイトルを傾けることができます。

タイトル

.deg-5 を指定してタイトルを 5 度傾けてみました。

.center、 .right を指定すると付箋の表示位置を変えられます。（付箋の横幅が短い場合）

タイトル

.center を指定して中央に表示してみました。

ツリー

箇条書きリストに .tree を指定するとツリー表示になります。属性を指定する位置が特殊なので注意してください。

  - {.tree} C:¥temp¥catalpa
      - catalpa.exe
      - index.html
      - LICENSE.txt
      - etc
          - firebase
              - config.json
          - netlify
              - index.html

メニュー

リンクの段落に .nav を指定するとナビゲーション ・ メニューになります。

{.nav}
[メニュー1](page1.html)
[メニュー2](page2.html)
[メニュー3](page3.html)
[メニュー4](page4.html)
[メニュー5](page5.html)

.border を指定すると枠が付きます。

メニュー 1 メニュー 2 メニュー 3 メニュー 4 メニュー 5

.border-top、 .border-right、 .border-bottom、 .border-left を指定して特定の辺のみに枠を付けることもできます。（下記は .border-bottom のみを指定した例です。）

メニュー 1 メニュー 2 メニュー 3 メニュー 4 メニュー 5

カード

リンクの段落に .card を指定するとカード形式のメニューになります。

• タイトルは必ずアスタリスク * で囲んでください。* で囲むことで　CSS 適用に必要な <em> タグが生成されます。
• 画像の縦横比は 1:1 になります。

{.card}
[![](img/sample1.jpg)*タイトル1*](page1.html)
[![](img/sample2.jpg)*タイトル1*](page2.html)
[![](img/sample3.jpg)*タイトル1*](page3.html)
[![](img/sample4.jpg)*タイトル1*](page4.html)
[![](img/sample5.jpg)*タイトル1*](page5.html)
[](){.padding}
[](){.padding}

[](){.padding} は空のカードです。末尾に空のカードを 2 つ配置しておくと、 カードが常に左寄せで表示されます。

.landscape を指定すると画像が横長 （16:10） になります。.landscape を指定するときは、 末尾に [](){.padding} を 4 つ配置してください。

タイトル 1タイトル 2タイトル 3タイトル 4タイトル 5

段落

段落 （パラグラフ） に属性を付与する方法は 2 つあります。

段落の前の行に属性を書く方法

{.center}
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

段落の末尾に半角スペースを配置して属性を書く方法

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。␣{.right}

段落 （パラグラフ） には様々な属性を付けることができます。

プリフィックス .m- の部分を .mt- にするとトップ ・ マージンのみを指定できます。同様に .mr- でライト ・ マージン、 .mb- でボトム ・ マージン、 .ml- でレフト ・ マージンを指定できます。.mx- でレフト ・ マージンとライト ・ マージン、 .my- でトップ ・ マージンとボトム ・ マージンを指定できます。

プリフィックス .p- の部分を .pt- にするとトップ ・ パディングのみを指定できます。同様に .pr- でライト ・ パディング、 .pb- でボトム ・ パディング、 .pl- でレフト ・ パディングを指定できます。.px- でレフト ・ パディングとライト ・ パディング、 .py- でトップ ・ パディングとボトム ・ パディングを指定できます。

たとえば、 段落に {.mt-3} を指定すると通常よりも間隔を広くとることができます。他にも、 画像とテキストの間隔を広げたいときや狭めたいときにマージン指定は便利です。

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

{.mt-3}
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

トップページに戻る