Sounds of Liberty 📎: マークダウン記法まとめ：基本構文からCryogen・note・GitHubの独自拡張まで

2026年11月12日

マークダウン記法まとめ：基本構文からCryogen・note・GitHubの独自拡張まで

1. 基本のMarkdown記法（標準構文 / CommonMark）
2. GitHub (GFM: GitHub Flavored Markdown) の独自・拡張記法
3. note (note.com) 特有の記法と編集マナー
4. Cryogen (本ブログ) 独自・静的サイト特有の仕様
5. 各プラットフォームの記法対応一覧表（チートシート）
6. まとめ：それぞれの場所での「書き味」と付き合う

ブログの執筆（Cryogen）や技術メモの管理（GitHub）、そしてWebでの情報発信（note）を行き来していると、「あれ？この書き方ってここで動くんだっけ？」「改行や見出しのルールが微妙に違う…」と戸惑うことがよくある。

Markdownはシンプルな記述でサクサク書ける反面、プラットフォームが採用しているパーサーや拡張機能（いわゆる“方言”）によって、使える機能やレンダリング結果に地味な違いがある。

記事投稿、執筆やメモ書きで用途での**基本のMarkdown構文（CommonMark）**を整理しつつ、Cryogen（このブログ）、note、GitHub（GFM） それぞれの独自仕様や拡張機能、留意すべきマナー・注意点をまとめておく。

軽い書く際のチートシート用だ。

1. 基本のMarkdown記法（標準構文 / CommonMark）

まずはどの環境でも共通して使える、マークダウンの基本ルールおさらい。

見出し (Headings)

行頭に # を書く。# の個数で見出しレベル（H1〜H6）を指定する。 作法: # の直後には必ず半角スペースを入れること。これがないと見出しとして解釈してくれないパーサーも結構ある。

# 見出し 1 (H1) - 通常は記事タイトル用
## 見出し 2 (H2) - 大見出し
### 見出し 3 (H3) - 中見出し
#### 見出し 4 (H4) - 小見出し
##### 見出し 5 (H5)
###### 見出し 6 (H6)

段落と改行 (Paragraphs & Line Breaks)

Markdownで引っかかりやすいのが「改行」のルールだ。

段落の分割（推奨）: 空行を1行挟む（Enterを2回押す）。これで別の段落（<p>タグ）に分かれる。
段落内改行（強制改行）: 行末に半角スペースを2つ入れて改行するか、環境によっては <br> タグを使う。

普通に改行しただけだと、標準Markdownでは「同じ行」として連結されてしまう点に注意したい。

これは最初の段落。
普通に改行しただけでは、標準のMarkdownだと同一行として繋がってしまう。

空行を1行挟むと、新しい段落として綺麗に分かれる。
行末に半角スペースを2つ入れると  
同じ段落内で改行（`<br>`）される仕組みだ。

テキスト装飾（太字・斜体・取り消し線・インラインコード）

文章の一部を強調したり装飾したりする基本セット。

*イタリック（斜体）* または _イタリック（斜体）_
**太字（ボールド）** または __太字（ボールド）__
***太字 兼 イタリック***
~~取り消し線（ストライクスルー）~~
`インラインコード` （変数名やコマンドなどを文中で示す）

表示イメージ:
- イタリック（斜体）
- 太字（ボールド）
- ~~取り消し線~~
- console.log("hello")

リスト（箇条書き・番号付き・ネスト）

箇条書きリストは -, *, + のいずれかを行頭に置く（基本は - でOK）。番号付きリストは 1., 2. のように数字とピリオドを行頭に置く。

- りんご
- みかん
  - <ruby>温州<rt>うんしゅう</rt></ruby>みかん（半角スペース2〜4個でインデントするとネスト可能）
  - <ruby>怨襲<rt>おんしゅう</rt></ruby>みかん
  - デコポン
- バナナ

1. 第一段階：要件定義
2. 第二段階：実装
3. 第三段階：テスト

引用 (Blockquote)

他者の文章や参考情報を引用する時は、行頭に > を置く。

> これは引用文。
> 複数行にわたって引用を続けることもできる。
>
> > このように `>` を重ねれば、引用を多重（ネスト）にできる。

メモ: 先日デザインをテコ入れしたおかげで、引用ブロックにも左ボーダーと引用符（“）が付いていい感じの見た目になっているヾ(*ΦωΦ)ﾉ　ﾋｬｯﾎｩ

水平線（区切り線）

話題の切り替えやセクションの区切りに使う。3つ以上の -, *, _ を並べればOK。

---
***
___

リンクと画像 (Links & Images)

リンクは [テキスト](URL)、画像は頭に ! をつけて ![代替テキスト](画像URL) と書く。

<!-- 通常のリンク -->
[Webcircus（当ブログ）](https://zemclip.com)

<!-- ツールチップ付きリンク -->
[Google](https://www.google.com "Googleのトップページ")

<!-- 画像の貼り付け -->
![サンプル画像](/img/sample.png)

<!-- 画像にリンクを貼る（組み合わせ） -->
[![バナー画像](/img/banner.png)](https://zemclip.com)

コードブロック (Code Blocks)

プログラムコードを複数行で書くときは、バッククォート3つ ``` で囲む。言語名を添えてあげると、シンタックスハイライトが効いて見やすくなる。

```clojure
(defn greet [name]
  (str "Hello, " name "!"))

(println (greet "World"))
```

テーブル (Tables)

パイプ | とハイフン - を組み合わせて表組みを作る。2行目のコロン : の位置で文字寄せ（左・中央・右）をコントロールできる。

| 言語 | 分類 | 特徴 |
| :--- | :---: | ---: |
| Clojure | Lisp系 | イミュータブル・関数型 |
| Python | スクリプト | シンプル・豊富なライブラリ |
| Rust | システム | 高速・メモリ安全 |

:---：左揃え（デフォルト）
:---:：中央揃え
---:：右揃え

2. GitHub (GFM: GitHub Flavored Markdown) の独自・拡張記法

世界中のエンジニアが日常的に叩いているGitHub。ここでは標準Markdownを強力に拡張した GFM（GitHub Flavored Markdown） が動いている。IssueやPR、README.mdを書くときの強い味方だ。

① アラート / コールアウト (Alerts)

GitHub公式がサポートしているアラート記法。引用の1行目に [!TYPE] を書くと、専用のアイコンとカラー枠線で綺麗に目立たせてくれる。

> [!NOTE]
> 役立つ補足情報や背景情報を記載する。

> [!TIP]
> 作業をスムーズにするためのコツや推奨手順。

> [!IMPORTANT]
> ユーザーが知っておくべき必須の情報。

> [!WARNING]
> 不具合のリスクや注意すべき点を示す。

> [!CAUTION]
> データの損失や破壊的な操作に関する警告。

② タスクリスト (Task Lists)

TODOリストや進捗管理に便利なチェックボックス付きリスト。GitHub上ならポチポチとクリックして完了チェックを付けられるのも気持ちいい。

- [x] 要件定義と仕様策定
- [x] 基本コンポーネントの実装
- [ ] ユニットテストの作成
- [ ] ドキュメントの整備

③ 脚注 (Footnotes)

学術論文っぽい注釈や、ちょっとした裏話をページの末尾に逃がしたいときに重宝する。

CommonMark[^1] は、Markdownの曖昧な仕様を標準化するためのプロジェクトだ。

[^1]: 2014年に発足し、主要なプラットフォームで仕様の統一が進められている。

④ リポジトリ内リソースへの自動リンク・メンション

GitHub上のMarkdownは、リポジトリ内の要素を自動でリンクにしてくれるのが賢いところ。

Issue / PR: #123 と書くだけで該当チケットへ飛べる。
コミットハッシュ: 7桁以上のハッシュ（例: a1b2c3d）でコミット画面へ直行。
メンション: @username でユーザーやチームへ通知を飛ばせる。
URLの自動リンク: https://... とべた書きするだけで勝手にリンク化。

⑤ 絵文字ショートコード (Emoji)

コロンで囲むおなじみのショートコード。感情を乗せたいときに。

:sparkles: :rocket: :octocat: :tada: :bug:

（GitHub上で ✨ 🚀 🐱 🎉 🐛 としてレンダリングされる）

⑥ Mermaid によるダイアグラム描画

コードブロックの言語に mermaid を指定すると、テキストで書いたフローチャートやシーケンス図をブラウザ上でそのまま図解してくれる。神機能。

```mermaid
flowchart LR
    A[Markdown執筆] --> B{ビルド}
    B -->|Cryogen| C[静的サイト]
    B -->|GitHub| D[README / Docs]
    B -->|note| E[記事公開]
```

⑦ TeX記法による数式表示 (Math)

LaTeX構文を使った数式レンダリングにも対応している。

インライン数式: $E = mc^2$
ブロック数式:

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

⑧ 折りたたみ表示 (`<details>` / `<summary>`)

長くなりそうな実行ログやオチは、HTMLタグでサクッと隠しておくと親切だ。

<details>
<summary>詳細な実行ログを展開する（クリックで開閉）</summary>

```bash
[INFO] Build starting...
[INFO] Compiling Clojure sources...
[SUCCESS] 0 errors, 0 warnings.

```

3. note (note.com) 特有の記法と編集マナー

noteは文章を心地よく読ませることに特化したプラットフォームだ。開発者向けのMarkdownエディタとは設計思想が根本から違うので、「note流の作法」を押さえておく必要がある。

① 見出しは2階層だけ（H2・H3）

noteの本文で使える見出しは、**大見出し（H2）と小見出し（H3）**の2種類のみ。

大見出し: ## 見出し名（またはツールバーの大見出し）
小見出し: ### 見出し名（またはツールバーの小見出し）

⚠️ ここがポイント: 記事タイトルそのものが <h1> 扱いになるため、本文で # 見出し（H1）は使えない。また ####（H4以下）の深い階層も用意されていない。階層を深く掘りすぎず、フラットかつシンプルに書くのがnoteで読まれるコツだ。

② URLをポンと置くだけで「ブログカード化」

noteの真骨頂がこれ。URLを1行に貼り付けてEnterを押すだけで、アイキャッチ画像と概要がついた綺麗な「ブログカード」に化けてくれる。

X（旧Twitter）のポスト、YouTube、GitHubのURLなんかも、それぞれの専用プレイヤーやカードとしてリッチに展開されるのが気持ちいい。

③ 引用とコードブロック

noteのエディタでもMarkdown風のショートカットが使える。

> ＋スペース：引用ブロック（背景グレー＋左バーの上品な見た目）
``` ＋ Enter：コードブロック（主要言語のシンタックスハイライト対応）

④ 自動で組まれる目次機能

設定で「目次を表示」にチェックを入れるか、エディタ上で「目次」ブロックを挟むだけで、本文の大見出し・小見出しから目次を自動生成してくれる。手動でアンカーを貼る必要は一切ない。

⑤ トーク機能（アイコン付き会話）

アイコン画像と吹き出しを並べて対話形式にできる、noteならではの機能。インタビューや対談、キャラクター同士の掛け合いに使えてエッセイにリズムが出る。

⑥ ルビ（ふりがな）

noteのエディタ上でテキストを選択してルビを振れる。Markdownインポートでも <ruby> タグをちゃんと解釈してくれるのが嬉しいところ。

<ruby>漢字<rt>かんじ</rt></ruby>

⑦ 有料ライン（境界線）

「ここから先は有料エリア」という境界線をワンタッチで引ける。クリエイターエコノミー直結の機能だ。

⚠️ noteでMarkdownを書くときの注意点

外部で書いたMarkdownをnoteに持ち込むときは、以下の制限に注意したい：

テーブル（表組み）は動かない: Markdownの | --- | はそのまま素通しされてただの文字列になってしまう。表を見せたいなら「画像にして貼る」か「箇条書きで整理する」のが鉄則。
生HTML・CSSは基本的に弾かれる: セキュリティのため、凝ったタグやインラインスタイルはサニタイズ（無効化）される。
チェックボックスも非対応: - [ ] と書いても普通の箇条書きドットになるだけ。

4. Cryogen (本ブログ) 独自・静的サイト特有の仕様

そして我らがClojure製静的サイトジェネレータ、Cryogenならではの仕様と遊び心について。

① EDN形式のフロントマター (Post Metadata)

JekyllやHugoみたいな一般的なジェネレータはYAMLを使うけれど、CryogenはLispの世界なのでClojureのEDNマップ形式でメタデータを書く。ファイルの先頭に置くのがお約束だ。

{:title "記事のタイトル"
 :layout :post
 :date "2026-11-12"
 :tags ["Markdown" "Cryogen" "Clojure"]
 :toc true
 :featured-image "/img/eyecatch.png"}

:title：記事のタイトル
:layout：:post（ブログ記事）または :page（固定ページ）
:date：公開日（"YYYY-MM-DD"）
:tags：タグのベクター（複数指定可能）
:toc：true にすると目次を自動生成
:featured-image：アイキャッチ画像のパス

② 目次の自動生成 (`:toc true`)

フロントマターに :toc true と書いておくだけで、記事内の見出し（H2〜H4）をパースして目次を自動生成してくれる。テンプレート側の {{post.toc|safe}} にスポッとはまる仕組みだ。手動でアンカーリンクをメンテナンスする手間がないのは実に楽。

③ 抜粋・続きを読む境界線 (``)

トップページやアーカイブで記事がズラズラと長文のまま並ぶのを防ぐために、導入部の終わりに  を挟む。

ここまでは記事の要約やイントロダクション。
トップページにはこの部分だけが表示される。

<!--more-->

ここから先が記事の本編だ。

ここより前のテキストが「プレビュー（抜粋）」になり、トップページには「続きを読む」リンクが付くわけだ。エッセイの冒頭フックを読ませるのにちょうどいい。

④ 生HTMLの完全サポートとルビ・折りたたみ

Cryogen（Flexmarkパーサー）は生HTMLとの相性が抜群で、Markdown内に直接書いたタグがそのまま素直に出力される。

このブログでもよく使う <ruby>訛<rp>(</rp><rt>なま</rt><rp>)</rp></ruby>り のようなルビ振りも、<details> によるアコーディオン開閉も思いのままだ。

<!-- ルビ表示 -->
<ruby> 訛 <rp>(</rp><rt>なま</rt><rp>)</rp> </ruby>り

<!-- 開閉アコーディオン -->
<details>
<summary>補足情報を開く</summary>
ここに隠しておきたい内容を記述できる。
</details>

⑤ Highlight.js によるコードハイライト

コードブロックにはHighlight.jsが効いている。ClojureやCommon Lisp、SchemeなどのLisp系はもちろん、シェルスクリプトやCSS、HTMLもバッチリ綺麗に色分けしてくれる。

```clojure
(defmulti area :shape)
(defmethod area :circle [{:keys [r]}]
  (* Math/PI r r))
```

⑥ Klipse によるブラウザ内コード対話実行

Cryogenの面白い機能が Klipse との連携だ。config.edn で有効化しておけば、コードブロックを読者がブラウザ上でいじって実行できる対話型REPLに変身させられる。

5. 各プラットフォームの記法対応一覧表（チートシート）

どこで何が使えて何が使えないのか、サクッと見比べられるマトリクス表を作ってみた。

機能・構文	標準 (CommonMark)	GitHub (GFM)	note	Cryogen (本ブログ)	備考・代替手段
見出し (H1〜H6)	○ (1〜6)	○ (1〜6)	△ (H2・H3のみ)	○ (1〜6)	noteは本文でH1使用不可、H4以下も非推奨
段落分け・改行	空行 / 末尾2空白	空行 / 末尾2空白	空行 / Shift+Enter	空行 / 末尾2空白	noteはEnterで新規ブロック、Shift+Enterで改行
太字・斜体	○	○	○	○	主要エディタで共通
取り消し線 (`~~`)	△ (方言)	○	○	○	GFM発祥だが広く普及
テーブル (表組み)	△ (拡張)	○	×	○	noteでは画像かリストで代用
タスクリスト (`- [ ]`)	×	○ (クリック可)	×	○	Cryogen(Flexmark)でもHTML出力対応
アラート (`[!NOTE]`)	×	○ (専用装飾)	×	△ (引用として表示)	GitHub独自の最新Callout仕様
Mermaid (作図)	×	○ (動的描画)	×	△ (JS追加で可)	GitHub上では標準レンダリング
数式 (TeX/LaTeX)	×	○ ( $...$ )	×	△ (KaTeX設定要)	技術文書にはGitHubが強い
URL自動カード化	×	△ (リンク化)	○ (リッチカード)	△ (テンプレート依存)	note最大の強み
目次生成	×	× (拡張機能要)	○ (目次ブロック)	○ (`:toc true`)	Cryogenはフロントマターで制御
記事分割/抜粋	×	×	×	○ (`<!--more-->`)	ブログ用静的ジェネレータ特有
ルビ (`<ruby>`)	△ (HTML対応環境)	○ (HTML)	○ (UI/HTML)	○ (HTML)	日本語記事で重宝
生HTML / `<details>`	△ (パーサー依存)	○	× (サニタイズ)	○	noteはセキュリティのためHTMLタグ制限

6. まとめ：それぞれの場所での「書き味」と付き合う

Markdownは、どこでも書ける手軽さがあるけれど、プラットフォームごとの癖や、読者の顔ぶれに合わせて、ちょっとだけ作法を変えてあげるのよう使い分けたい。

GitHub: 構造化と情報共有が主役。タスクリストやテーブル、Mermaid、アラート（[!NOTE]）をフル活用して、無駄のないドキュメントに仕立てる。
note: 読者との距離感が近い場所。見出しは2階層でスッキリまとめ、テーブルは使わず、URL貼り付けによるリッチカードや画像を多用してテンポよく読ませる。
Cryogen（自分のブログ）: 自由なナレッジベース兼エッセイの場。EDNフロントマターや :toc true、 を活用しつつ、HTMLやLispコードを好きなだけ散りばめて楽しむ。

書き分けの感覚さえ掴んでしまえば、どのエディタを開いても迷わず気持ちよく筆が進むはず。記事を書くときのちょっとしたカンペとして、本記事を参照するようにしたい。

Tags: Cryogen note Markdown GitHub

« Cryogen ∩ Klipseでブログ記事をコードプレイグラウンドにしてみるデザイン一新。 »