結論

Markdown(マークダウン)は、# や * などの記号で見出し・太字・リストを表す書き方です。ファイルの拡張子は .md です。

この記事でわかること

  • 6つの変換ライブラリで確かめた記法一覧と変換結果
  • 「表示されない」19症状の原因と直し方
  • README.md・AGENTS.md のテンプレート2種

2026年10月16日更新|markdown-it 15.0.2・cmarkgfm など6種で変換確認

書いた記号は変換ライブラリで HTML になり、表示される場所ごとに使える記法が少しずつ違います。

flowchart TD
    A[書く記号<br># 見出し・** 太字・- リスト] --> B[変換ライブラリ<br>Markdown を HTML に]
    B --> C[GitHub]
    B --> D[Zenn・Qiita]
    B --> E[VS Code]
    C --> F[使える記法と表示が<br>環境ごとに少しずつ違う]
    D --> F
    E --> F

Markdown はテキストのまま読みやすく、HTML に変換して表示できます。README、技術ブログ、社内Wiki、チャット、AI への指示ファイル(AGENTS.md・CLAUDE.md)まで、エンジニアが文章を書く場面の多くで使われています。

まず、よく使う記法だけを1つの表にまとめます。

やりたいこと 書き方 表示
見出し # 見出し1 ## 見出し2 大きな見出し
改行 行末に半角スペース2つ、または \ 段落内で改行
太字 **太字** 太字
箇条書き - 項目 ・項目
表 | A | B | + |---|---| 表
コード ``` +言語名で囲む 等幅の枠
取り消し線 ~~取り消し~~ ~~取り消し~~
チェックリスト - [ ] 未完了 - [x] 完了 チェックボックス
リンク [文字](https://example.com) リンク
番号付きリスト 1. 手順 1. 手順
引用 > 引用文 左に線のついた枠

ただし、Markdown は環境によって使える記法が少しずつ違います。 「改行されない」「太字にならない」「表にならない」の多くは、この違いと日本語特有のルールが原因です。この記事では、記法の一覧に加えて、6つの変換ライブラリで実際に HTML へ変換した結果、GitHub・Zenn・Qiita・VS Code などの違い、README.md・AGENTS.md のコピペ用テンプレートを載せました。

確認環境:Node.js 22.22.2 で commonmark.js 0.31.2(CommonMark の参照実装)、markdown-it 15.0.2、marked 18.1.1、remark-parse 11.0.0 + remark-gfm 4.0.1、Python 3.11 で cmarkgfm 2025.10.22(GitHub の変換エンジン cmark-gfm のバインディング)と Python-Markdown 3.11 を使い、変換結果の HTML を確かめました。GitHub・GitLab・Zenn・Qiita・Obsidian・VS Code の独自記法と表示は、各公式ドキュメントで確かめた内容です(確認日 2026年10月14日)。

本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。

(記載例)出典:株式会社RJC「Markdown記法一覧|マークダウンの書き方早見表と表示されない原因」

Markdown記法の一覧(書き方早見表)

どの環境でも使える基本の記法と、環境によって使えない拡張の記法を1つの表にしました。 「対応」の列は、6つの変換ライブラリの結果と公式ドキュメントにもとづきます。

表現したいこと 書き方 変換後の HTML 対応
見出し(1〜6) # 見出し1 〜 ###### 見出し6 <h1> 〜 <h6> 共通
見出し(下線式) 文字の次の行に === / --- <h1> / <h2> 共通
段落 空行で区切る <p> 共通
段落内の改行 行末に半角スペース2つ、または \ <br> \ は一部非対応
太字 **太字**(__太字__ も可) <strong> 共通
斜体 *斜体*(_斜体_ も可) <em> 共通
太字+斜体 ***太字斜体*** <em><strong> 共通
取り消し線 ~~取り消し~~ <del> / <s> GFM などの拡張
下線・上付き・下付き <ins> <sup> <sub> HTML のまま HTML が使える環境
キーボードのキー <kbd>Ctrl</kbd> HTML のまま HTML が使える環境
箇条書き - 項目(* + も可) <ul><li> 共通
番号付きリスト 1. 項目 <ol><li> 共通
入れ子 親の本文の開始位置まで字下げ 入れ子の <ul> 共通(字下げ幅に差)
チェックリスト - [ ] 未完了 / - [x] 完了 <input type="checkbox"> GFM などの拡張
引用 > 引用文 <blockquote> 共通
アラート(囲み枠) > [!NOTE] の次行から > 本文 GitHub で色付きの枠 GitHub・GitLab
インラインコード `code` <code> 共通
コードブロック ``` +言語名で囲む <pre><code class="language-xxx"> 共通
表 | 見出し | 見出し | + |---|---| <table> GFM などの拡張
表の寄せ :--- 左 / :---: 中央 / ---: 右 align / text-align GFM などの拡張
リンク [文字](https://example.com) <a href> 共通
URL をそのままリンク <https://example.com> <a href> 共通
ページ内リンク [手順へ](#手順) <a href="#手順"> 見出しの ID は環境しだい
画像 ![代替テキスト](image.png) <img> 共通
画像の大きさ <img src="a.png" width="200"> HTML のまま HTML が使える環境
画像にリンク [![ロゴ](logo.png)](https://example.com) <a><img></a> 共通
脚注 本文[^1] + [^1]: 注釈 番号付きの注釈 GFM などの拡張
折りたたみ <details><summary>見出し</summary> … </details> HTML のまま HTML が使える環境
水平線 ---(前に空行) <hr> 共通
字下げ(段落下げ) 行頭に全角スペース、または &emsp; 空白の文字 ほぼ共通
数式 $E=mc^2$ / $$ … $$ 環境が描画 GitHub・Zenn など
図 ```mermaid のコードブロック 環境が描画 GitHub・Zenn など
絵文字 :smile: 絵文字 GitHub・Qiita など
記号をそのまま出す \* \# \_ のように \ を前に 記号の文字 共通
コメント(非表示) <!-- メモ --> 表示されない HTML が使える環境

「共通」は、今回の6つの変換ライブラリすべてで同じ結果になったものです。迷ったら「CommonMark + GFM(GitHub Flavored Markdown)」の範囲で書くと、多くの環境でそのまま表示されます。 CommonMark は Markdown の共通仕様、GFM は CommonMark に表・取り消し線・チェックリスト・URL の自動リンク・脚注などを加えた GitHub の仕様です。

Markdown(マークダウン)とは|.mdファイル・README.mdとの関係

Markdown は、2004年に John Gruber 氏が公開した記法です。 「書きやすく読みやすいプレーンテキストを、HTML に変換できる形式」として作られました。その後、各サービスが独自に拡張したため書き方の違い(方言)が増え、共通の仕様として CommonMark がまとめられています。CommonMark 仕様の最新版は 0.31.2(2024年1月28日)です。

用語 意味
Markdown 記号で見出しや強調を表す書き方。2004年公開
CommonMark あいまいだった書き方を厳密に決めた共通仕様
GFM GitHub の仕様。CommonMark +表・取り消し線・チェックリストなど
.md / .markdown Markdown ファイルの拡張子(RFC 7763)
text/markdown Markdown の MIME タイプ(RFC 7763、2016年)

.md ファイルの作り方・開き方

.md ファイルは、拡張子が .md のテキストファイルです。 特別なソフトは要らず、メモ帳でも書けます。文字コードは UTF-8 にしておくと、GitHub などでも文字化けしません。

  1. VS Code などのエディタで新しいファイルを作り、memo.md のように .md で保存する
  2. # 見出し や - 箇条書き を書く
  3. VS Code なら Ctrl+Shift+V(Mac は Cmd+Shift+V)でプレビュー、Ctrl+K V(Mac は Cmd+K V)で横に並べて表示

VS Code のドキュメントでは、プレビューは CommonMark を対象にしており、数式(KaTeX)と Mermaid の図も描画できると説明されています。

README.md とは

README.md は、リポジトリの最初に読む説明書を Markdown で書いたファイルです。 GitHub は .github・ルート・docs のいずれかに置いた README を、リポジトリのトップに表示します。複数あるときは .github、ルート、docs の順に探します。GitHub の表示では 500 KiB を超えた部分は切り捨てられます。書き方は後半の「コピペで使えるテンプレート」に載せました。

AGENTS.md・CLAUDE.md も Markdown

AGENTS.md は、AI のコーディングエージェント向けの README です。 公式サイト agents.md では「ふつうの Markdown」で、決まった項目はないと説明されています。ビルドやテストのコマンド、コードの書き方の約束を見出しと箇条書きで書きます。モノレポでは、編集するファイルにいちばん近い AGENTS.md が優先されます。Claude Code が読む CLAUDE.md も Markdown です。

環境別の対応表(CommonMark・GitHub・Zenn・Qiita・VS Code)

基本の記法はどこでも同じですが、表・チェックリスト・脚注・アラート・数式・図は拡張機能のため、環境によって対応が分かれます。 次の表は、各サービスの公式ドキュメントと、この記事での変換結果で確かめた内容です。

記法 CommonMark(仕様) GitHub Zenn VS Code プレビュー
見出し・強調・リスト・引用・コード・リンク・画像 ○ ○ ○ ○
行末スペース2つ / \ で改行 ○ ○ ○ ○
Enter だけで改行 ×(同じ段落として連結) ×(.md ファイル)/○(Issue・PR) ○ ×
取り消し線 ~~ × ○(~ 1つも可) ○ ○
表 × ○ ○ ○
チェックリスト - [ ] × ○ ― ―
脚注 [^1] × ○(Wiki は除く) ○(^[…] も可) ―
アラート > [!NOTE] ×(ただの引用) ○ ×(:::message を使う) ―
折りたたみ <details>(HTML) <details> :::details タイトル ―
数式 × ○($ $$ ```math) ○($ $$) ○(KaTeX)
Mermaid × ○ ○ ○
HTML タグ ○ ○(一部のタグ・属性は除去) <br> のみ(コメントは可) ―

○:公式ドキュメントに記載あり/×:非対応(または別の記法)/―:公式ドキュメントに記載がないもの(拡張機能で対応できる場合があります)。

Qiita・GitLab・Obsidian の独自記法も、公式ドキュメントで確かめた範囲でまとめます。

記法 Qiita GitLab Obsidian
囲み枠(注意書き) :::note info / warn / alert > [!note] など5種 > [!info] など13種
コードにファイル名 ```ruby:qiita.rb ― ―
チェックリスト - [ ] / - [x] [ ] [x] + [~](対象外) ○
数式 ```math、$`…`$ ○ ○
図 mermaid / plantuml mermaid / plantuml mermaid

見出しの書き方

# の数が見出しのレベルで、# の後ろには半角スペースが必要です。

# 見出し1
## 見出し2
### 見出し3

見出し1(下線式)
===

見出し2(下線式)
---

▼ 表示結果(GitHub と同じ cmark-gfm で変換)

見出し1

見出し2

見出し3

見出し1(下線式)

見出し2(下線式)

入力 CommonMark 系4種・cmark-gfm Python-Markdown
#見出し(スペースなし) <p>#見出し</p>(見出しにならない) <h1>見出し</h1>
# 見出し <h1>見出し</h1> <h1>見出し</h1>
見出し1 ↵ === <h1>見出し1</h1> <h1>見出し1</h1>

CommonMark 系4種は commonmark.js・markdown-it・marked・remark+gfm のことです(以下同じ)。CommonMark 準拠の環境では # の後ろのスペースを忘れると見出しになりません。 環境をまたいで使うなら、常にスペースを入れておくと安心です。

ページ内リンク(目次のリンク)

見出しへのリンクは [文字](#見出しのID) と書きます。 見出しの ID の作り方は環境が決めます。GitHub のドキュメントでは、英字は小文字にし、スペースは - に、そのほかの記号は削除し、同じ ID が続くと -1 -2 を付けると説明されています。

[インストールへ](#インストール)

## インストール

今回の6種の変換ライブラリは、どれも見出しに ID を付けませんでした(リンク側は href="#%E6%89%8B%E9%A0%86" のように変換されます)。自分のサイトで使うなら、見出しに ID を付けるプラグインを足します。

段落と改行・段落下げの書き方

Markdown では、Enter で改行しただけでは同じ段落として続けて表示されます。段落を分けるなら空行、段落内で改行するなら行末に半角スペース2つか \ を置きます。

1行目(行末に半角スペース2つ)  
2行目

1行目(行末に \ )\
2行目

ここから新しい段落(前に空行)

▼ 表示結果(GitHub と同じ cmark-gfm で変換)

1行目(行末に半角スペース2つ)
2行目

1行目(行末に \ )
2行目

ここから新しい段落(前に空行)

入力(↵ は改行) commonmark.js marked Python-Markdown
1行目↵2行目 <p>1行目↵2行目</p>(改行なしで表示) 同左 同左
1行目␣␣↵2行目(␣ はスペース) 1行目<br />2行目 1行目<br>2行目 1行目<br />2行目
1行目\↵2行目 1行目<br />2行目 1行目<br>2行目 1行目\↵2行目(改行されない)
1行目<br>↵2行目 1行目<br> 1行目<br> 1行目<br>
  • HTML の中の改行(↵)はブラウザでは空白として表示されるため、<br> がない限り画面上は1行につながります
  • 行末スペースは見えないため、エディタの「末尾の空白を削除」設定で消えることがあります。VS Code のドキュメントでも、Markdown では files.trimTrailingWhitespace を切ることが勧められています。見える形で残したいなら \ が便利です(Python-Markdown は非対応)
  • Zenn は Enter だけで改行されます。markdown-it で breaks: true にすると 1行目<br>↵2行目 になることを確かめました
  • GitHub は、Issue・PR・Discussions のコメントでは Enter で改行され、.md ファイルでは改行されません

段落下げ(字下げ)のやり方

行頭の半角スペースは消えるため、字下げには全角スペースか &emsp; を使います。 半角スペースを4つ以上入れると、コードブロックになります(後述)。

入力 commonmark.js markdown-it・remark・cmark-gfm marked Python-Markdown
␣␣2スペース字下げ 字下げが消える 字下げが消える <p>␣␣2スペース… 字下げが消える
字下げした段落(全角) 全角スペースが消える 全角スペースが残る 残る 消える
&emsp;&emsp;emspで字下げ 全角幅の空白2つ 全角幅の空白2つ &emsp; のまま出力 &emsp; のまま出力

marked と Python-Markdown は &emsp; を文字のまま HTML に出しますが、ブラウザはこれを全角幅の空白として表示します。どの環境でも字下げしたいなら &emsp; がいちばん安定していました。 marked は行頭の半角スペースを HTML に残しますが、ブラウザでは空白がまとめられるため、画面上は字下げになりません。

強調(太字・斜体・取り消し線・下線)の書き方

**太字** *斜体* ~~取り消し~~ ***太字斜体*** `code`

▼ 表示結果(GitHub と同じ cmark-gfm で変換)

太字 斜体 取り消し 太字斜体 code

変換ライブラリ 出力
commonmark.js <strong>太字</strong> <em>斜体</em> ~~取り消し~~ <em><strong>太字斜体</strong></em> <code>code</code>
marked / remark+gfm / cmark-gfm <strong>太字</strong> <em>斜体</em> <del>取り消し</del> <em><strong>太字斜体</strong></em> <code>code</code>
markdown-it 取り消し線が <s>取り消し</s>、それ以外は同じ

Markdown の ** は太字、* は斜体の記号です。 __太字__ や _斜体_ も同じ意味ですが、日本語の文中では _ が強調になりません(次の節)。

日本語で太字にならない原因(「」や()の直後)

** の内側の端が「」():。などの記号で、外側に文字が続くと、CommonMark 準拠の環境では太字になりません。 CommonMark は「** の前後が空白か記号か」で強調の開始・終了を判定しており、日本語は単語の間に空白がないためです。

入力 CommonMark 系4種・cmark-gfm(GitHub) Python-Markdown
これは**重要**です。 これは<strong>重要</strong>です。 太字になる
これは**「重要」**です。 これは**「重要」**です。(太字にならない) 太字になる
**注意:**次の手順 **注意:**次の手順(太字にならない) 太字になる
価格は**1,200円(税込)**です 価格は**1,200円(税込)**です(太字にならない) 太字になる
これは__太字__です これは__太字__です(太字にならない) 太字にならない

直し方は3つあります。 どれも6種すべてで太字になりました。

直し方 入力 出力
記号を ** の外に出す これは「**重要**」です。 これは「<strong>重要</strong>」です。
記号を ** の外に出す **注意**:次の手順 <strong>注意</strong>:次の手順
** の外側に半角スペース これは **「重要」** です。 これは <strong>「重要」</strong> です。
HTML で書く これは<strong>「重要」</strong>です。 そのまま太字

**太字 **です のように、閉じる ** の内側にスペースがあるときも、Python-Markdown 以外の5種では太字になりませんでした。

取り消し線の書き方(~~ と ~)

取り消し線は ~~取り消したい文字~~ と書きます。 GFM の拡張なので、CommonMark だけの環境では ~~ がそのまま表示されます。

入力 marked・remark+gfm・cmark-gfm markdown-it commonmark.js・Python-Markdown
~~2本~~ <del>2本</del> <s>2本</s> 文字のまま
~1本~ <del>1本</del> 文字のまま 文字のまま
価格は~~1,000円~~800円です <del>1,000円</del> <s>1,000円</s> 文字のまま
これは~~「旧仕様」~~です 文字のまま 文字のまま 文字のまま
  • ~~ も ** と同じ判定で、内側の端が「」などの記号だと取り消し線になりません。直し方も太字と同じで、記号を外に出すか、外側に半角スペースを入れます
  • GitHub のドキュメントでは ~ 1つの取り消し線も載っています。環境をまたぐなら ~~ の2つが確実です
  • HTML が使える環境なら <del>取り消し</del> や <s>取り消し</s> でも書けます

下線・上付き・下付き・キーボードのキー

Markdown には下線の記法がないため、HTML タグで書きます。 GitHub のドキュメントでは、下線に <ins>、上付きに <sup>、下付きに <sub> が載っています。

<ins>下線</ins> H<sub>2</sub>O x<sup>2</sup> <kbd>Ctrl</kbd>+<kbd>C</kbd>

▼ 表示結果(GitHub と同じ cmark-gfm で変換)

下線 H2O x2 Ctrl+C

commonmark.js・marked・remark+gfm・cmark-gfm・Python-Markdown では、これらのタグがそのまま HTML に出力されました。markdown-it は既定(html: false)だと &lt;ins&gt; のように文字として表示します。

箇条書き・番号付きリスト・チェックリスト

- 項目A
- 項目B
    - 入れ子(4スペースならどの環境でも入れ子になる)

1. 手順1
1. 手順2(すべて 1. でも自動で連番になる)

▼ 表示結果(GitHub と同じ cmark-gfm で変換)

  • 項目A
  • 項目B
    • 入れ子(4スペースならどの環境でも入れ子になる)
  1. 手順1
  2. 手順2(すべて 1. でも自動で連番になる)

入れ子にするときは、親の文字(- の後ろの本文)の位置までインデントします。 - なら2スペース、1. なら3スペースで入れ子になりますが、Python-Markdown(MkDocs などで使用)は4スペースが必要です。

入力 CommonMark 系4種・cmark-gfm Python-Markdown
- 親 ↵ ␣␣- 子 入れ子になる <li>親</li><li>子</li>(同じ階層)
1. 手順A ↵ ␣␣␣- 補足 ↵ 2. 手順B 手順A の中に補足が入れ子 3項目が同じ階層に並ぶ
1. A ↵ 1. B ↵ 1. C <ol> の連番(1, 2, 3 と表示) 同左

リストの前の空行

入力 CommonMark 系4種・cmark-gfm Python-Markdown
買うもの ↵ - ペン ↵ - ノート 段落+箇条書き <p>買うもの - ペン - ノート</p>(リストにならない)
手順 ↵ 1. 開く ↵ 2. 保存 段落+番号付きリスト リストにならない
手順 ↵ 2. 開く ↵ 3. 保存 リストにならない(段落のまま) リストにならない

CommonMark では、段落の直後に番号付きリストを続けるとき、1. 以外の番号から始めるとリストになりません。 リストの前に空行を1行入れておくと、どの環境でもリストになります。

チェックリスト(チェックボックス)の書き方

チェックリストは - [ ] やること と書き、完了は [x] にします。 [ と ] の間は半角スペース1つ、] の後ろにも半角スペースが要ります。

- [ ] 親タスク
  - [x] 子タスク(入れ子もできる)
- [X] 大文字の X でも完了になる

▼ 表示結果(GitHub と同じ cmark-gfm で変換)

  • 親タスク
    • 子タスク(入れ子もできる)
  • 大文字の X でも完了になる
入力 marked・remark+gfm・cmark-gfm 残り3種(下記)
- [ ] 未完了 <input type="checkbox" disabled> + 未完了 [ ] 未完了 の文字のまま
- [x] 完了 / - [X] 完了 checked 付きのチェックボックス 文字のまま
- [ ]未完了(] の後にスペースなし) チェックボックスにならない 文字のまま
␣␣- [x] 子タスク(入れ子) 入れ子のチェックボックス 文字のまま

残り3種は commonmark.js・markdown-it(既定)・Python-Markdown です。チェックリストは GFM の拡張なので、CommonMark だけの環境では [ ] が文字として表示されます。 GitHub の Issue や PR 本文では、表示されたチェックボックスをクリックして切り替えられます。GitLab では [~](対象外)も使えます。

引用とアラート(> [!NOTE])

> 引用文です。
> > 二重の引用

> [!NOTE]
> 補足情報です。

> [!WARNING]
> 注意が必要な内容です。

▼ 表示結果(GitHub と同じ cmark-gfm で変換)

引用文です。

二重の引用

ℹ Note

補足情報です。

⚠ Warning

注意が必要な内容です。

GitHub のアラートは > [!NOTE] > [!TIP] > [!IMPORTANT] > [!WARNING] > [!CAUTION] の5種類です。 GitHub では色とアイコンのついた枠で表示されます。GitHub のドキュメントでは、それぞれ次の用途とされています。

種類 用途(GitHub ドキュメントの説明)
[!NOTE] 流し読みでも知っておいてほしい情報
[!TIP] よりよく、より楽に進めるための助言
[!IMPORTANT] 目的を果たすために欠かせない情報
[!WARNING] 問題を避けるためにすぐ注意を向けてほしい情報
[!CAUTION] 操作の危険や悪い結果についての注意

同じドキュメントでは、アラートは1記事に1〜2個までにし、続けて置かず、入れ子にもできないとされています。

変換ライブラリ > [!NOTE] ↵ > 補足です。 の出力
6種すべて(cmark-gfm を含む) <blockquote><p>[!NOTE]↵補足です。</p></blockquote>

アラートは変換エンジンではなく GitHub の表示側で処理されるため、GitHub 以外では [!NOTE] という文字を含むただの引用として表示されます。 GitLab も 17.10 から同じ形のアラート(> [!note] など5種)に対応しています。

マークダウンで吹き出し(気泡)・囲み枠・テキストボックスを作る

Markdown の標準の記法には、吹き出し(気泡)やテキストボックスはありません。 「気泡」「吹き出し」「テキストボックス」で探している書き方は、多くの場合「文章を枠で囲んで目立たせる」ことです。環境ごとの書き方は次のとおりです。

環境 書き方 表示
どこでも > 文章(引用) 左に線のついた枠
GitHub・GitLab > [!NOTE] ↵ > 文章 色とアイコンつきの枠
Obsidian > [!info] タイトル ↵ > 文章 コールアウト(色つきの枠)
Zenn :::message 〜 ::: 黄色の枠(alert は赤)
Qiita :::note info 〜 ::: 枠(warn alert もある)
HTML が使える自分のサイト <div class="bubble"> + CSS 自由な形の吹き出し
<!-- Zenn -->
:::message
ここが枠で囲まれます
:::

<!-- Qiita -->
:::note warn
注意書き
:::

<!-- Obsidian(- を付けると最初は閉じた状態) -->
> [!tip]- 折りたたみのコールアウト
> 中身

これらの独自記法は、対応していない環境ではそのまま文字で表示されます。 6種の変換ライブラリでは、:::note info は段落の文字のまま、> [!tip]- … はただの引用になりました。

吹き出しを HTML と CSS で作る(自分のサイト向け)

HTML が使える環境なら、<div> で囲んで CSS で吹き出しの形にできます。 <div> の直後と </div> の直前に空行を入れると、中の Markdown も変換されます。

<div class="bubble">

**吹き出し**の中身

</div>
.bubble {
  position: relative;
  display: inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  background: #eef4ff;
}
.bubble::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 16px;
  border: 8px solid transparent;
  border-right-color: #eef4ff;
}

上の Markdown は、commonmark.js・markdown-it(html: true)・marked・remark+gfm・cmark-gfm で <div class="bubble"><p><strong>吹き出し</strong>の中身</p></div> に変換されました。Python-Markdown は <div> の中の **吹き出し** を変換しませんでした(md_in_html 拡張を有効にし、<div markdown="1"> と書くと変換されました)。GitHub では CSS を読み込めず、style 属性も取り除かれるため、この方法は使えません。

テキストボックスの代わりに使える書き方

方法 書き方 向いている場面
引用 > 文章 どこでも使える囲み
コードブロック ```text 〜 ``` 等幅でそのまま見せたい文章
1マスの表 | 文章 | ↵ |---| 表が使える環境で枠線を付けたいとき
アラート・独自記法 > [!NOTE]、:::message など 対応する環境で目立たせたいとき

1マスの表は、markdown-it・marked・remark+gfm・cmark-gfm で <table> になり、commonmark.js と Python-Markdown(拡張なし)では文字のままでした。

コード(インラインコード・コードブロック)の書き方

文中のコードは `npm install` のように囲みます。
`` `バッククォート` を含むコード `` は2つで囲みます。

```python
print("hi")
```
変換ライブラリ ```python ブロックの出力
commonmark.js / markdown-it / marked <pre><code class="language-python">print(&quot;hi&quot;)</code></pre>
remark+gfm <pre><code class="language-python">print("hi")</code></pre>
cmark-gfm <pre lang="python"><code>…</code></pre>
Python-Markdown(拡張なし) <p><code>python print("hi")</code></p>(コードブロックにならない)

言語名は class="language-python" などとして出力され、これを目印に色分け(シンタックスハイライト)されます。 Python-Markdown では fenced_code 拡張(extra に含まれる)を有効にするとコードブロックになります。

コードブロックの中に ``` を書きたいときは、外側を4つの ```` か ~~~ で囲みます。 この記事でも、Markdown の例は ```` で囲んでいます。

環境 ファイル名をつける 差分(diff)を色分け
Qiita ```ruby:qiita.rb 言語名を diff_ruby のようにする
Zenn ```js:ファイル名 ```diff js
GitHub ― ```diff

段落から空行を空けて4スペース字下げした行も、コードブロックとして扱われます。 文章を字下げしたつもりが、等幅の枠で表示されるのはこのためです。

入力 出力(6種共通)
本文 ↵(空行)↵ ␣␣␣␣これはコード扱い <p>本文</p><pre><code>これはコード扱い</code></pre>

表の書き方(寄せ・| のエスケープ・セル内改行)

在庫一覧

| 品名 | 数 |
|:---|---:|
| ペン | 3 |
| 付箋 `a|b` | 10 |

▼ 表示結果(GitHub と同じ cmark-gfm で変換)

在庫一覧

品名 数
ペン 3
付箋 a|b 10

2行目の区切り行でコロンの位置を変えると寄せを指定できます。:--- は左、:---: は中央、---: は右寄せです。 セルの中で | を使うときは | とエスケープします。

変換ライブラリ 出力(抜粋)
markdown-it <th style="text-align:left">品名</th> <th style="text-align:right">数</th> … <code>a|b</code>
marked / remark+gfm / cmark-gfm <th align="left">品名</th> <th align="right">数</th> … <code>a|b</code>
commonmark.js <p>| 品名 | 数 | …</p>(表にならない)
Python-Markdown(拡張なし) 表にならない(tables 拡張で対応)

表の前に空行がないとき・セル内で改行したいとき

入力 結果
在庫一覧 ↵ | 品名 | 数 | ↵ |---|---:| ↵ | ペン | 3 | markdown-it・marked・remark+gfm・cmark-gfm:段落+表/Python-Markdown:すべて段落の文字
| 1行目<br>2行目 | x | marked・remark+gfm・cmark-gfm・markdown-it(html: true):セル内で改行/markdown-it(既定):&lt;br&gt; の文字

今回試した GFM 対応の4種は空行なしでも表になりましたが、表にならない環境もあります。 表の前後には空行を入れておくと、環境が変わっても表になります。Qiita では 3x2 のように入力すると表のひな形が作られます。

リンク・画像の書き方

[リンク文字](https://example.com "マウスを乗せたときのタイトル")
![代替テキスト](image.png)
<https://example.com>

[公式サイト][site]

[site]: https://example.com

[![ロゴ](logo.png)](https://example.com)
<img src="image.png" width="200" alt="幅を指定した画像">
入力 出力(marked)
[RJC](https://example.com "タイトル") <a href="https://example.com" title="タイトル">RJC</a>
![代替テキスト](image.png) <img src="image.png" alt="代替テキスト">
[公式サイト][site] + [site]: https://example.com <a href="https://example.com">公式サイト</a>
[![ロゴ](logo.png)](https://example.com) <a href="https://example.com"><img src="logo.png" alt="ロゴ"></a>(6種共通)
https://example.com(URL だけ) marked・remark+gfm・cmark-gfm:リンクになる/commonmark.js・markdown-it(既定)・Python-Markdown:文字のまま
<https://example.com> 6種すべてでリンクになる
  • URL をそのまま書いてリンクになるのは GFM の拡張(自動リンク)です。< > で囲めば、CommonMark の範囲でもリンクになります
  • 画像の大きさは Markdown では指定できないため、<img width="200"> を使います。Zenn では ![](URL =250x) で幅を指定できます
  • 画像の代替テキストは、画像が表示できないときや読み上げで使われるので、内容がわかる言葉を入れます
  • GitHub のドキュメントでは、リポジトリ内のファイルへは相対リンク(docs/setup.md や ../images/a.png)が勧められています

脚注の書き方

本文に注釈をつけます[^1]。

[^1]: 注釈の内容です。

▼ 表示結果(GitHub と同じ cmark-gfm で変換)

本文に注釈をつけます1。

  1. 注釈の内容です。 ↩

変換ライブラリ 出力
cmark-gfm(footnotes 有効、GitHub と同じ) 本文<sup class="footnote-ref"><a href="#fn-1" …>1</a></sup> + 末尾に <section class="footnotes">
remark+gfm <sup><a href="#user-content-fn-1" …>1</a></sup> + 末尾に注釈
markdown-it + markdown-it-footnote <sup class="footnote-ref"><a href="#fn1" …>[1]</a></sup> + 末尾に注釈
Python-Markdown(footnotes または extra 拡張) <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> + 末尾に注釈
commonmark.js / marked / Python-Markdown(拡張なし) 本文<a href="注釈です。">^1</a>(リンクとして誤変換)

脚注は GFM の拡張で、非対応の環境では [^1] が「参照リンク」と解釈され、意図しないリンクになります。 注釈は書いた位置に関係なく文書の末尾にまとめて表示されます。Zenn では 本文^[注釈] のインライン脚注も使えます。

折りたたみ(details)の書き方

<details>
<summary>クリックで開く</summary>

**ここに Markdown を書く**(summary の後と閉じタグの前に空行)

</details>

▼ 表示結果(GitHub と同じ cmark-gfm で変換)

クリックで開く

ここに Markdown を書く(summary の後と閉じタグの前に空行)

入力 出力(commonmark.js)
<summary>詳細</summary> の直後の行に **太字** **太字**(Markdown として変換されない)
<summary>詳細</summary> の後に空行を入れてから **太字** <p><strong>太字</strong></p>

HTML ブロックの中は、空行を入れないと Markdown として解釈されません。 markdown-it(html: true)、marked、remark+gfm、cmark-gfm も同じ結果でした。markdown-it は既定(html: false)だと &lt;details&gt; と文字として表示されます。Zenn では :::details タイトル 〜 ::: を使い、Qiita のドキュメントでは <details open> で最初から開いた状態にする方法が紹介されています。

数式・Mermaid の書き方

インライン数式:$E = mc^2$

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

```mermaid
graph LR
  A[注文] --> B[在庫確認] --> C[発送]
```

数式と Mermaid は、変換ライブラリではなく表示する環境(GitHub、Zenn、VS Code など)が描画します。 今回の6種の変換ライブラリでは、$E = mc^2$ は <p>$E = mc^2$</p> のまま、Mermaid は language-mermaid のコードブロックとして出力されました。自分のサイトで表示するなら、KaTeX や MathJax、mermaid.js を別に読み込みます。

環境 数式 Mermaid
GitHub $…$、$`…`$、$$、```math(MathJax で描画) ```mermaid
Zenn $…$、$$(前後に空行、KaTeX で描画) ```mermaid(1ブロック2000文字まで)
Qiita ```math、$`…`$ ```mermaid / ```plantuml
VS Code $…$、$$(KaTeX で描画) ```mermaid

Mermaid の図の種類と書き方は、関連記事「Mermaid記法一覧|全図種のコピペ用コードと描画結果まとめ」で扱っています。

水平線・エスケープ・HTMLタグ

水平線が見出しになる

入力 出力(6種共通)
本文です ↵ --- <h2>本文です</h2>
本文です ↵(空行)↵ --- <p>本文です</p><hr>

文字の行のすぐ下に --- を書くと、その行が見出し2(下線式の見出し)になります。 水平線にしたいときは前に空行を入れるか、*** や ___ を使います。

記号をそのまま表示する(エスケープ)

入力 出力(6種共通)
計算は 2*3*4 です 計算は 2<em>3</em>4 です(3 が斜体になる)
\*注意\* と *注意* *注意* と <em>注意</em>

* _ # [ ] ` | などを記号として表示したいときは、前に \ をつけます。 掛け算などはインラインコード(`2*3*4`)にするのも読みやすい方法です。

Markdown で使える HTML タグ

Markdown の中には HTML タグをそのまま書けます。 ただし、使えるかどうかは環境の設定しだいです。

環境・設定 <br> <details> <sup> など <script>・style 属性
commonmark.js・marked・remark(rehype-raw) そのまま出力 そのまま出力
markdown-it(既定 html: false) &lt;br&gt; の文字になる 文字になる
cmarkgfm(既定の安全モード) <!-- raw HTML omitted --> に置き換え 置き換え
GitHub 使える 取り除かれる
Zenn <br> とコメントのみ 使えない

自分のサイトでユーザーが書いた Markdown を表示するなら、HTML をそのまま通さず、DOMPurify などで不要なタグを取り除く設計にします。文字の色を変える <span style="color:red"> は、GitHub では style が取り除かれるため色が付きません。

コピペで使えるテンプレート(README.md・AGENTS.md)

よく書く Markdown ファイルのひな形です。 どちらも cmark-gfm(GitHub と同じ変換)で、見出し・コードブロック・表・チェックリストが意図どおりに変換されることを確かめました。

README.md のテンプレート

# プロジェクト名

1〜2文で「何をするものか」を書きます。

## 必要なもの

- Node.js 22 以上
- PostgreSQL 16

## インストール

```bash
git clone https://github.com/example/project.git
cd project
npm install
```

## 使い方

```bash
npm start
```

## 設定

| 環境変数 | 説明 | 既定値 |
|---|---|---|
| `PORT` | 待ち受けるポート | `3000` |
| `DATABASE_URL` | 接続先 | なし |

## ライセンス

MIT

用途別(ライブラリ・Web アプリ・社内ツールなど)のひな形は、関連記事「README.mdの書き方|コピペで使える用途別テンプレート4種」で扱っています。

AGENTS.md のテンプレート

# AGENTS.md

## プロジェクトの概要
- TypeScript の Web API。ソースは `src/`、テストは `test/`

## セットアップとコマンド
- 依存の導入:`npm ci`
- テスト:`npm test`
- 型チェック:`npm run typecheck`

## コードの書き方
- 関数は小さく、名前は英語の動詞から始める
- 新しい依存を追加する前に理由を PR に書く

## PR を出す前に
- [ ] `npm test` が通る
- [ ] `npm run typecheck` が通る

AI 向けの指示ファイルは、見出しで区切り、1行に1つの約束を箇条書きで書くと読み取られやすくなります。 コマンドはインラインコードで囲むと、そのまま実行する文字列だと伝わります。AGENTS.md と GitHub Copilot の指示ファイルの違いは関連記事「AGENTS.mdの書き方テンプレ|copilot-instructions比較」で、Claude Code 向けは関連記事「CLAUDE.mdの書き方|何を書くか・置き場所・育て方【テンプレートつき】」で扱っています。

「表示されない」ときのチェックリスト

症状 主な原因 直し方
改行されない Enter だけでは同じ段落 行末に半角スペース2つか \、段落なら空行
行末スペースの改行が消えた エディタが末尾の空白を削除 \ か <br> にする
見出しにならない # の後ろにスペースがない # 見出し
太字にならない ** の内側が「」():などの記号 記号を外に出す / 外側に半角スペース / <strong>
取り消し線にならない 非対応の環境、または ~~ の内側が記号 ~~ の外に記号を出す / <del>
__太字__ が効かない 日本語の文中では _ の強調が効かない **太字** を使う
リストにならない 前に空行がない、2. から始めた リストの前に空行
入れ子にならない インデント不足(Python-Markdown は4スペース) 4スペースで字下げ
チェックボックスにならない ] の後にスペースがない、非対応の環境 - [ ] の形にする
表にならない GFM 非対応、前に空行がない、区切り行がない 前後に空行、|---| の行を入れる
表の列がずれる セル内の | | とエスケープ
急に大きな見出しになった 文字の直下の --- 前に空行を入れる
字下げした文章が枠で囲まれた 4スペース字下げはコードブロック 字下げは &emsp; か全角スペース
字下げが消える 行頭の半角スペースは削除される &emsp; を使う
一部だけ斜体になった 本文中の * や _ \* とエスケープ、またはインラインコード
[!NOTE] がそのまま出る アラート非対応の環境 引用や太字の「注意:」で代用
:::message がそのまま出る Zenn・Qiita 以外の環境 引用やアラートで代用
HTML タグが文字で出る markdown-it の html: false など html: true にする、または記法で書く
details の中が変換されない <summary> の後に空行がない 空行を入れる

変換結果を自分で確かめるコード

表示に迷ったら、実際に HTML へ変換して確かめるのがいちばん早い方法です。 次のコードは、この記事の検証で使ったものを最小限にしたもので、そのまま実行できます。

mkdir md-check && cd md-check
npm init -y
npm install commonmark markdown-it marked
// check.mjs
import * as commonmark from 'commonmark';
import MarkdownIt from 'markdown-it';
import { marked } from 'marked';

const src = 'これは**「重要」**です。\n\n手順\n2. 開く\n3. 保存\n\n- [ ] 未完了\n';

const cm = new commonmark.HtmlRenderer().render(new commonmark.Parser().parse(src));
console.log('--- commonmark.js\n' + cm);
console.log('--- markdown-it\n' + new MarkdownIt().render(src));
console.log('--- marked\n' + marked.parse(src));
node check.mjs
--- commonmark.js
<p>これは**「重要」**です。</p>
<p>手順
2. 開く
3. 保存</p>
<ul>
<li>[ ] 未完了</li>
</ul>

--- markdown-it
<p>これは**「重要」**です。</p>
<p>手順
2. 開く
3. 保存</p>
<ul>
<li>[ ] 未完了</li>
</ul>

--- marked
<p>これは**「重要」**です。</p>
<p>手順
2. 開く
3. 保存</p>
<ul>
<li><input disabled="" type="checkbox"> 未完了</li>
</ul>

3つとも太字にならず、2. から始めた手順もリストになりません。チェックリストは GFM に対応した marked だけがチェックボックスにしました。CommonMark 公式サイトの「dingus」(ブラウザ上で変換結果を確かめられるページ)や、VS Code のプレビューでも確かめられます。

よくある質問

Q. Markdown(マークダウン)とは何ですか? A. 記号で見出しや強調を表し、テキストのまま読みやすく書ける記法です。2004年に John Gruber 氏が公開しました。.md ファイルに書き、GitHub やブログ、VS Code などが HTML に変換して表示します。

Q. マークダウン記法はどれから覚えればよいですか? A. 見出し(#)、太字(**)、箇条書き(-)、リンク([]())、コード(```)の5つで、日常の文章の多くを書けます。次に GFM の表・取り消し線・チェックリストを押さえ、Zenn の :::message や GitHub のアラートのような独自記法は、使う環境に合わせて足します。

Q. Markdown の ** は何の意味ですか? A. 囲んだ文字を太字(<strong>)にする記号です。* 1つで囲むと斜体、*** で囲むと太字の斜体になります。日本語では「」や()の直前・直後に ** を置くと太字にならないことがあります。

Q. マークダウンで取り消し線はどう書きますか? A. ~~取り消し~~ です。GFM の拡張なので、GitHub・Zenn・Qiita・VS Code などでは取り消し線になり、CommonMark だけの環境では ~~ がそのまま出ます。~~「旧」~~新 のように内側の端が記号だと線が引かれないため、記号を外に出します。

Q. マークダウンでチェックリストはどう書きますか? A. - [ ] やること と書き、完了は - [x] やること にします。] の後ろの半角スペースを忘れるとチェックボックスになりません。GitHub の Issue や PR では、表示されたチェックボックスをクリックして切り替えられます。

Q. マークダウンで気泡(吹き出し)やテキストボックスは作れますか? A. 標準の記法にはありません。どこでも使えるのは引用(>)で、GitHub・GitLab ではアラート(> [!NOTE])、Obsidian ではコールアウト、Zenn では :::message、Qiita では :::note で囲み枠を作れます。吹き出しの形にしたいときは、HTML が使える環境で <div> と CSS を使います。

Q. マークダウンで段落を下げる(字下げする)には? A. 行頭の半角スペースは消えるため、&emsp; か全角スペースを使います。今回の6種では、&emsp; は全角幅の空白の文字か &emsp; のまま出力され、どちらもブラウザでは全角幅の空白になります。行頭に半角スペースを4つ以上入れるとコードブロックになります。

Q. md ファイルはどう書けばよいですか? A. 拡張子 .md のテキストファイルを作り、Markdown 記法で書きます。文字コードは UTF-8 にします。VS Code なら Ctrl+Shift+V でプレビューしながら書けます。

Q. README.md とは何ですか? A. リポジトリの説明書を Markdown で書いたファイルです。GitHub はルートなどに置いた README.md をリポジトリのトップに表示します。プロジェクトの目的、インストール、使い方、設定、ライセンスをこの順で書くと、初めての人が迷いません。

Q. AGENTS.md はどう書きますか? A. ふつうの Markdown で、決まった項目はありません。プロジェクトの概要、ビルド・テストのコマンド、コードの書き方の約束、PR の前に確かめることを、見出しと箇条書きで書きます。この記事のテンプレートがそのまま使えます。

Q. 文字の色や大きさは変えられますか? A. Markdown の記法には色や大きさの指定はありません。HTML が使える環境なら <span style="…"> などで指定できますが、GitHub では style 属性が取り除かれます。強調は太字、補足は引用やアラートで表すと、どの環境でも伝わります。

Q. 表の中で改行やリストは使えますか? A. 表のセルは1行で書く決まりで、Markdown のリストは使えません。HTML が使える環境なら <br> でセル内改行ができます。長い内容は表の外に書くか、見出しと箇条書きで表すと読みやすくなります。

Q. Markdown とテキスト(.txt)の違いは? A. 中身はどちらもただのテキストです。.md にすると、GitHub や VS Code が Markdown として認識し、見出しや表を整えて表示します。.txt のままでは記号がそのまま表示されます。

まとめ

  • Markdown は記号で見出しや強調を書く記法。基本は CommonMark、表・取り消し線・チェックリスト・脚注は GFM の拡張
  • Enter だけでは改行されない。段落内の改行は行末スペース2つか \、段落は空行で分ける
  • **「重要」**です や ~~「旧」~~ は CommonMark 準拠の環境で効かない。記号を外に出すか、外側に半角スペースを入れる
  • リスト・表・水平線の前には空行を入れると、どの環境でも意図どおりに表示される
  • 吹き出し(気泡)・テキストボックスは標準の記法にない。引用、GitHub のアラート、Zenn・Qiita の独自記法、HTML と CSS で代用する
  • 字下げは &emsp;、4スペース字下げはコードブロックになる
  • アラート・数式・Mermaid は表示する環境が描画する。非対応の環境では文字やコードのまま出る
  • 迷ったら実際に HTML へ変換して確かめる

参考・出典

確認日はいずれも 2026年10月14日です。

  • CommonMark Spec(0.31.2):https://spec.commonmark.org/
  • GitHub Flavored Markdown Spec:https://github.github.com/gfm/
  • GitHub Docs「基本的な書き方とフォーマットの構文」:https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax
  • GitHub Docs「README について」:https://docs.github.com/ja/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes
  • GitLab Docs「GitLab Flavored Markdown」:https://docs.gitlab.com/user/markdown/
  • Zenn「ZennのMarkdown記法一覧」:https://zenn.dev/zenn/articles/markdown-guide
  • Qiita「Markdown記法 チートシート」:https://qiita.com/Qiita/items/c686397e4a0f4f11683d
  • Obsidian Help「Callouts」:https://obsidian.md/help/callouts
  • Visual Studio Code「Markdown and Visual Studio Code」:https://code.visualstudio.com/docs/languages/markdown
  • AGENTS.md:https://agents.md/
  • RFC 7763「The text/markdown Media Type」:https://www.rfc-editor.org/rfc/rfc7763.html
  • Wikipedia「Markdown」:https://ja.wikipedia.org/wiki/Markdown

本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。

(記載例)出典:株式会社RJC「Markdown記法一覧|マークダウンの書き方早見表と表示されない原因」

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。

WE ARE HIRING

RJCで一緒に開発しながら、
成長を楽しみませんか?

RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください!

  • 127日年間休日
  • 12時間平均残業時間
  • 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ!

ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨(休暇 or 金一封)、11期連続の黒字決算。

ABOUT RJC RJCがどんな会社か知る 考え方、研修、働き方、福利厚生、社員の前職まで。RJCのことが丸わかり! RJC丸わかりページへ JOB DESCRIPTION 仕事内容・待遇を見てみる 仕事内容、給与・待遇、選考の流れ。経験者も未経験も!応募前に知りたいこと、まとめました! 募集要項を見る ENTRY エントリーする エントリーは1〜2分・履歴書不要です。まずは話を聞いてみたい、という方でも歓迎です! エントリーフォームへ

RJCで一緒に開発しながら、 成長を楽しみませんか?