Chirpyで使用するマークダウン記法を解説

この記事ではJekyllのテーマであるChirpyのマークダウン記法について解説しています．

Posted Mar 19, 2026 Updated Mar 23, 2026

By Tomohiro Watanabe

17 min read

はじめに

JekyllのChirpyテーマには特殊なマークダウン記法が用意されています．しかし，それを解説している公式ドキュメントは英語のみなので，和訳してまとめなおしました．

この記事でわかること

Chirpyでのマークダウン記法

この記事の対象者

この記事は下記の人を対象にしています．

JekyllでChirpyテーマを使用したい/している人

開発環境

OS: Windows 11 Home 25H2
言語: Ruby 3.2.10
ツール: Gem: 3.4.19; Bundler: 4.0.7; Jekyll: 4.4.1

事前準備

JekyllとChirpyのインストールを完了させておいてください．
Jekyllについての説明はこちら
Chirpyについての説明はこちら

見出し

見出しの大きさは4段階あります. H1～H4まで番号が付いており，番号が大きいほど小さい文字となります．

H1

H2

H3

H4

# H1
## H2
### H3
#### H4

文章

ここに文章を記述します．

ここに文章を記述します．

プロンプト

tip

info

warning

danger

> `tip`
{: .prompt-tip }

> `info`
{: .prompt-info}

> `warning`
{: .prompt-warning}

> `danger`
{: .prompt-danger}

表

列1	列2	列3
a₁₁	a₁₂	a₁₃
a₂₁	a₂₂	a₂₃
a₃₁	a₃₂	a₃₃

| 列1            |      列2       |            列3 |
| :------------- | :------------: | -------------: |
| a<sub>11</sub> | a<sub>12</sub> | a<sub>13</sub> |
| a<sub>21</sub> | a<sub>22</sub> | a<sub>23</sub> |
| a<sub>31</sub> | a<sub>32</sub> | a<sub>33</sub> |

:--で右揃え，:-:で中央揃え，--:で右揃えになります．

リンク

https://tomo2405.github.io/skillog

<https://tomo2405.github.io/skillog>

脚注

脚注を付けたい文字列1¹，文字列2²

脚注を付けたい文字列1[^foot1]，文字列2[^hogehoge]

インラインコード

これは インラインコードです.

これは `インラインコード`です.

ファイルパス

ファイルへのパス /path/to/the/file.extend.

ファイルへのパス `/path/to/the/file.extend`{: .filepath}.

コードブロック

言語指定なし

これは一般的なコードスニペットです．シンタックスハイライトと行数が付きません．

```
これは一般的なコードスニペットです．シンタックスハイライトと行数が付きません．
```

言語指定あり

        
      
print("Hello World")

```python
print("Hello World")
```

ファイル名を指定する

        
      
print("hello world")

数学に関する記述

タイトルの宣言の箇所（front matter）を以下のようにmathフラグをtrueにすることで， TeXのように数式を記述できます（MathJaxという記述方法らしいです）．

title: Chirpyで使用するマークダウン記法を解説
description: >-
    この記事ではJekyllのテーマであるChirpyのマークダウン記法について解説しています．
date: 2026-03-19 00:00:00 +0800
categories: [Blog, Skill]
tags: [chirpy]
math: true　<- これ

Σ（シグマ）

\[\begin{equation} \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} \label{eq:series} \end{equation}\]

$$
\begin{equation}
  \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
  \label{eq:series}
\end{equation}
$$

式に対する参照も定義できます \eqref{eq:series}.

式に対する参照も定義できます \eqref{eq:series}.

解の公式（二次方程式）

$a \ne 0$のとき, $ax^2 + bx + c = 0$には以下に示す2つの解が存在する．

\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]

$a \ne 0$のとき, $ax^2 + bx + c = 0$には以下に示す2つの解が存在する．

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

Mermaid SVG

テキストで書いた図（フローチャートやシーケンス図など）を SVG形式（ベクター画像）として出力することができます．そのためにはまず，タイトルの宣言の箇所（front matter）を以下のようにmermaidフラグをtrueにします．

---
title: Chirpyで使用するマークダウン記法を解説
description: >-
    この記事ではJekyllのテーマであるChirpyのマークダウン記法について解説しています．
date: 2026-03-19 00:00:00 +0800
categories: [Blog, Skill]
tags: [chirpy]
math: true
mermaid: true <- これ
---

例としてガントチャートを示しています．

 gantt
  title  タスク進捗管理
  task1 :a, 2026-03-20, 1w
  task2 :crit, b, 2026-03-23, 1d
  task3 :active, c, after b a, 1d

```mermaid
 gantt
  title  タスク進捗管理
  task1 :a, 2026-03-20, 1w
  task2 :crit, b, 2026-03-23, 1d
  task3 :active, c, after b a, 1d
```

a, b, cはid，critは重要なタスク（そのタスクの完了/未完了がのちの工程に響くものなど）， activeは現在進行中のタスクを表し， afterはidで指定したものの後に開始するタスクを表しています．

画像

デフォルト (キャプションあり)

愛媛県松山市の梅津寺で撮影した写真

![自分の写真](/assets/img/me.jpg){: width="972" height="589" }
_愛媛県松山市の梅津寺で撮影した写真_

左寄せ

![自分の写真](/assets/img/me.jpg){: width="972" height="589" .w-75 .normal}

画像の右側に文章を挿入

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキステキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

![自分の写真](/assets/img/me.jpg){: width="972" height="589" .w-50 .left}
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキステキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像の左側に文章を挿入

![自分の写真](/assets/img/me.jpg){: width="972" height="589" .w-50 .right}
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキステキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

ライトモード/ダークモードで使用する画像を切り替える

ライトモード用の画像とダークモード用の画像をそれぞれ用意し，次のように記述することでユーザの使用しているモードによって画像を切り替えることもできる．

![light mode only](/xxx/sample-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
![dark mode only](/xxx/sample-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }

動画

次のように記述することでサイト内に動画を埋め込むことも可能です．

{% include embed/youtube.html id='hogehoge' %}

おわりに

Chirpyテーマでのマークダウン記法についてまとめました．

参考記事

https://chirpy.cotes.page/posts/text-and-typography

[^foot1]: 文字列1の説明など
[^hogehoge]: ふがふが

文字列1の説明など ↩︎
ふがふが ↩︎

Blog, Skill

chirpy

This post is licensed under CC BY 4.0 by the author.