👩‍💻

ZennのMarkdown記法一覧

2020/09/06に公開

64件

Zenn

idea

このページでは Zenn のmarkdown記法を一覧で紹介します。

見出し

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

テキストリンク

[アンカーテキスト](リンクのURL)

アンカーテキスト

Markdownエディタでは、テキストを範囲選択した状態でURLをペーストすることで選択範囲がリンクになります。（参照）

画像

![](https://画像のURL)

画像の横幅を指定する

画像の表示が大きすぎる場合は、URL の後に半角スペースを空けて=○○xと記述すると、画像の幅を px 単位で指定できます。

![](https://画像のURL =250x)

Altテキストを指定する

![Altテキスト](https://画像のURL)

Altテキスト

キャプションをつける

画像のすぐ下の行に*で挟んだテキストを配置すると、キャプションのような見た目で表示されます。

![](https://画像のURL)
*キャプション*

キャプション

画像にリンクを貼る

以下のようにすることで画像に対してリンクを貼ることもできます。

[![](画像のURL)](リンクのURL)

テーブル

| Head | Head | Head |
| ---- | ---- | ---- |
| Text | Text | Text |
| Text | Text | Text |

Head	Head	Head
Text	Text	Text
Text	Text	Text

コードブロック

コードは「```」で挟むことでブロックとして挿入できます。以下のように言語を指定するとコードへ装飾（シンタックスハイライト）が適用されます。

```js

```

const great = () => {
  console.log("Awesome");
};

シンタックスハイライトには Prism.js を使用しています。
📄 対応言語の一覧 →

ファイル名を表示する

言語:ファイル名と:区切りで記載することで、ファイル名がコードブロックの上部に表示されるようになります。

```js:ファイル名

```

fooBar.js

const great = () => {
  console.log("Awesome")
}

diff のシンタックスハイライト

diffと言語のハイライトを同時に適用するには、以下のようにdiffと言語名を半角スペース区切りで指定します。

```diff js

```

@@ -4,6 +4,5 @@
+    const foo = bar.baz([1, 2, 3]) + 1;
-    let foo = bar.baz([1, 2, 3]);

なお、diffの使用時には、先頭に+、-、>、<、半角スペースのいずれが入っていない行はハイライトされません。

同時にファイル名を指定することも可能です。

```diff js:ファイル名

```

fooBar.js

@@ -4,6 +4,5 @@
+    const foo = bar.baz([1, 2, 3]) + 1;
-    let foo = bar.baz([1, 2, 3]);

数式

Zenn ではKaTeXによる数式表示に対応しています。
KaTeXのバージョンは常に最新バージョンを使用します。

📄 KaTeXがサポートする記法の一覧 →

数式のブロックを挿入する

$$で記述を挟むことで、数式のブロックが挿入されます。たとえば

$$
e^{i\theta} = \cos\theta + i\sin\theta
$$

は以下のように表示されます。

e^{i\theta} = \cos\theta + i\sin\theta

インラインで数式を挿入する

$a\ne0$ というように$ひとつで挟むことで、インラインで数式を含めることができます。たとえば $a\ne0$ のようなイメージです。

引用

> 引用文
> 引用文

引用文
引用文

脚注

脚注を指定するとページ下部にその内容が表示されます。

脚注の例[^1]です。インライン^[脚注の内容その2]で書くこともできます。

[^1]: 脚注の内容その1

脚注の例^[1]です。インライン^[2]で書くこともできます。

区切り線

-----

インラインスタイル

*イタリック*
**太字**
~~打ち消し線~~
インラインで`code`を挿入する

イタリック
太字
~~打ち消し線~~
インラインでcodeを挿入する

インラインのコメント

自分用のメモをしたいときは HTML のコメント記法を使用できます。

<!-- TODO: ◯◯について追記する -->

この形式で書いたコメントは公開されたページ上では表示されません。ただし、複数行のコメントには対応していないのでご注意ください。

Zenn 独自の記法

メッセージ

:::message
メッセージをここに
:::

:::message alert
警告メッセージをここに
:::

アコーディオン（トグル）

:::details タイトル
表示したい内容
:::

タイトル

表示したい内容

要素をネストさせるには

外側の要素の開始/終了に : を追加します。

::::details タイトル
:::message
ネストされた要素
:::
::::

タイトル

コンテンツの埋め込み

リンクカード

# URLだけの行
https://zenn.dev/zenn/articles/markdown-guide

URL だけが貼り付けられた行があると、その部分がカードとして表示されます。

また@[card](URL)という書き方でカード型のリンクを貼ることもできます。

アンダースコア _ を含むURLが正しく認識されない場合

markdownパーサの仕様により、アンダースコア（_）を含むURLで、正しくURLが認識されないことがあります。

https://zenn.dev/__example__

https://zenn.dev/example

対処法

カード型のリンクとして表示したい場合は
@[card](ここにURL)という書き方をしてください
単純にリンク化された URL を貼り付けたい場合は<https://zenn.dev/__example__>のような形で<と>で URL を囲むようにしてください

X（Twitter）のポスト（ツイート）

# ポストのURLだけの行（前後に改行が必要です）
https://twitter.com/jack/status/20

# x.comドメインの場合
https://x.com/jack/status/20

以前は@[tweet](ポストのURL)の記法を採用していましたが、現在はポストのURLを貼り付けるだけで埋め込みが表示されます。

アンダースコア _ を含む URL が正しく認識されない場合

markdown パーサの仕様により、URL の/の区切りの中に 2 つ以上アンダースコア（_）を含むと、自動リンクが途中で途切れてしまいます。

https://twitter.com/__example__/status/12345678910

https://twitter.com/example/status/12345678910

対処法

このような URL では@[tweet](ポストのURL)という書き方をしていただくようお願いします。

リプライ元のポストを非表示にする

リプライを埋め込んだ場合、デフォルトでリプライ元のポスト含まれて表示されます。ポストのURL?conversation=noneのようにクエリパラメータにconversation=noneを指定すると、リプライ元のポストが含まれなくなります。

YouTube

# YouTubeのURLだけの行（前後に改行が必要です）
https://www.youtube.com/watch?v=WRVsOCh907o

以前は@[youtube](YouTubeの動画ID)という記法を採用していましたが、現在は動画URLを貼り付けるだけで動画を埋め込むことができます。

GitHub

GitHub上のファイルへのURLまたはパーマリンクだけの行を作成すると、その部分にGitHubの埋め込みが表示されます。

# GitHubのファイルURLまたはパーマリンクだけの行（前後に改行が必要です）
https://github.com/octocat/Hello-World/blob/master/README

上記のリンクは、以下のように表示されます。

行の指定

GitHubと同じように、リンクの末尾に#L00-L00のような形で表示するファイルの開始行と終了行を指定することができます。

# コードの開始行と終了行を指定
https://github.com/octocat/Spoon-Knife/blob/main/README.md#L1-L3

上記のリンクは以下のように表示されます。

また、開始行のみ指定することもできます。

# コードの開始行のみ指定
https://github.com/octocat/Spoon-Knife/blob/main/README.md#L3

上記のリンクは、以下のように開始行のみ埋め込まれて表示されます。

テキストファイル以外は埋め込めません

埋め込めるファイルは、ソースコードなどのテキストファイルのみとなっています。
もし画像などのファイルを指定した場合は、以下のような表示になります。

GitHub Gist

@[gist](GistのページURL)

GistのページURLを指定します。

特定のファイルだけ埋め込みたい場合は@[gist](https://gist.github.com/foo/bar?file=example.json)のようにクエリ文字列で?file=ファイル名という形で指定します。

CodePen

@[codepen](ページのURL)

デフォルトの表示タブはページのURL?default-tab=html,cssのようにクエリを指定することで変更できます。

SlideShare

@[slideshare](スライドのkey)

SlideShare の埋め込み iframe に含まれる...embed_code/key/○○...の◯◯の部分を入力します。

SpeakerDeck

@[speakerdeck](スライドのID)

SpeakerDeck で取得した埋め込みコードに含まれるdata-idの値を入力します。

JSFiddle

@[jsfiddle](ページのURL)

埋め込みオプションを指定する場合、iframe用の埋め込みURL（ ページのURL + /embedded/{Tabs}/{Visual}/ ）を入力します。

CodeSandbox

@[codesandbox](embed用のURL)

CodeSandbox では、各ページから埋め込み用の<iframe>を取得できます。この<iframe>に含まれるsrcの URL を括弧の中に入力します。

StackBlitz

@[stackblitz](embed用のURL)

StackBlitz では、各ページから「Embed URL」を取得できます。取得した URL をそのまま括弧の中に入力します。

Figma

@[figma](ファイルまたはプロトタイプのURL)

Figma では、ファイルまたはプロトタイプのページで共有リンクを取得できます。取得したURLをそのまま括弧の中に入力します。

オンラインエディターではモーダルから挿入可能

オンラインのエディターでは「+」ボタンを押すことで、外部コンテンツ埋め込み用のモーダルを表示できます。

その他の埋め込み可能なコンテンツ

オンラインエディターの埋め込みの選択肢としては表示されませんが、以下の埋め込み記法もサポートしています。

blueprintUE

@[blueprintue](ページのURL)

例：
@[blueprintue](https://blueprintue.com/render/0ovgynk-/)

blueprintUE を埋め込むには、公開されているページのURLをそのまま括弧の中に入力します。

ダイアグラム

mermaid.js によるダイアグラム表示に対応しています。コードブロックの言語名をmermaidとすることで自動的にレンダリングされます。

```mermaid
graph TB
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

は以下のように表示されます。

他にもシーケンス図やクラス図が表示できます。文法は mermaid.js に従っていますので、どのように書けばよいかは公式サイトの文法を参照してください。

制限事項

Zenn で mermaid.js 対応を行うにあたり、いくつか制限事項を設定させていただいています。制限事項は今後も様子を見て追加・廃止・値の変更など行う可能性があります。

クリックイベントの無効化

Interaction機能として図の要素にクリックイベントなどが設定できますが、セキュリティの観点でZennでは無効にさせていただきます。

ブロックあたりの文字数制限 - 2000文字以内

ブロックあたりの文字数を2000文字に制限させていただいています。これを超えた場合、ダイアグラムが表示される代わりにエラーメッセージが表示されます。

ブロックあたりのChain数制限 - 10以下

フローチャートにおいて、ノードをひとまとまりで表現する記述として&が利用できます。以下のようなイメージです。

```mermaid
graph LR
   a --> b & c--> d
```

は以下のように表示されます。

便利ですが、数が多くなるとノードの接続が多くなり、ブラウザ側での描画に負荷が生じる可能性があるため、&の数を10に制限させていただきます。こちらも超えた場合はダイアグラムの代わりにエラーメッセージが表示されます。

入力補完

以下はMarkdown記法ではありませんが、Markdownエディタで利用できる入力補完機能についても紹介します。

絵文字（Emoji）

:に続いて任意の1文字を入力すると、絵文字の候補が表示されます。

脚注

脚注の内容その 1 ↩︎
脚注の内容その 2 ↩︎

GitHubで編集を提案

Discussion

Hidden comment

Shuhei Kadowaki 2020/09/27に更新

こんにちは。
独自記法のメッセージについてですが、default(黄色)と"alert"(赤)以外に、"info"(青)、"tips"(緑)を追加するのはどうでしょうか？
現状の選択肢だけだとどうしても警告色っぽいイメージになってしまうので、単純な追加情報などに適した色合いがあるといいなと思いました。

参考になるかわかりませんが、以下のページの"admonition" sectionのようなイメージです:

ラジオ 2021/01/13

Hidden comment

srz_zumix 2020/09/28に更新

コードブロックの言語指定ですが対応している言語のリストはありますでしょうか？
また C++ の場合、 cpp でハイライトされるのですが違和感があります。

#include が # と include で別の色にハイライト
override, final がハイライトされない

Zenn公式 2020/09/28

Zennではシンタックスハイライトにprism.jsを使っており、基本的に「Zennの対応言語 = prism.jsが対応している言語」という形になります。

srz_zumix 2020/09/28

ありがとうございます。承知しました。

kbutti 2020/10/21

つまり、これらに対応しているということですね。

現代武士 2020/10/05

plantumlに対応してほしい。

藤原惟 2020/10/09

はじめまして。見出しですが、推奨の見出しレベルはありますか？

たとえば、はてなブログのMarkdown記法だと

<h1>: Webサイト自体のタイトル
<h2>: 記事のタイトル（大見出し）
<h3>: 記事内で使える小見出し

という使い分けを前提としたテーマが多いです。
（ただしはてなが厳密に決めた訳ではなく、CSSの意図としてそうなっている場合が多いようです）

Zenn公式 2020/10/10

とくに推奨はなく、h1から始めてもh2から始めてもOKです！

藤原惟 2020/10/10

ありがとうございます！

Yukio Obuchi 2020/10/10

コードブロックに内容をコピーするボタンが付けられると嬉しいです。

Zenn公式 2020/10/10に更新

該当のissueが作成されています。

今後の検討・対応状況はこちらで更新していきます。

Hidden comment

pik 2020/10/29

はじめまして。
こちらで本を書こうと思っておりいくつか書いてみたのですが改行で改行されませんでした。
何か改行コード（空白２つなど）が必要でしょうか？

Zenn公式 2020/10/29に更新

いえ、Enterで改行できます。
マークダウンで以下のように書くと、プレビューや実際の本文でも2行で表示されます。

First Line
Second Line

マークダウン→HTMLの変換にはmarkdown-itを使っており、こちらのデモサイトで「breaks」にチェックを入れたときと同じ挙動で改行されると思います。

pik 2020/10/29

それが改行されていないのです…
ここにその画像を載せようと思ったんですが、ここには画像は載せられないのですね

pik 2020/10/29

ちなみに markdown-it で [breaks] にチェックを入れた場合、正しく改行されました。

Zenn公式 2020/10/29に更新

なるほど
Issueを作成しましたので、お手数ですがこちらに回答いただけますか？

Nobuo Yamashita 2020/11/11

改行に関して、markdown-itのデモサイトのようにbreaksのon、offを制御できるといいのになぁと思います。文書をgithubで管理していると、diffが行単位なので、テキストとしては一文一行で書きたくて、レンダリングとしては、空行で段落区切りで、段落の最後が改行されるという挙動になっているほうがありがたいです。

重城良国 2021/02/05

Hidden comment

とが 2020/12/16

表の中で改行することはできるでしょうか？
が改行文字にならないようです．

あ	い	う
中身	を	改行したいです

Zenn公式 2020/12/16

現時点では対応していませんが、対応は検討中です（該当のIssue）。

とが 2020/12/16

ありがとうございます！

Zenn公式 2020/12/28に更新

遅くなってしまいましたが<br>タグが使えるようになりました。CLIでも反映させるためにはnpm install zenn-cli@latestで更新をお願いします。

Hidden comment

masalib 2020/12/20

Markdownで折りたたみはできないのでしょうか？

Zenn公式 2020/12/21

#Zenn独自の記法の中にあるアコーディオンが該当すると思います。

masalib 2020/12/21

ありがとうございます

Hidden comment

とが 2021/01/06

バッククォート 3 つでコードブロックを書くとき，「prism.jp による syntax highlight を適用することなく（=プレーンテキストのままで）」「ファイル名を表示する」ことは可能でしょうか？

Zenn公式 2021/01/06に更新

現状正式には対応はしていないです。CLIでのエラーメッセージが気にならないのであれば

```-:text

のようにすればファイル名だけを表示できます。

とが 2021/01/07

ありがとうございます．確かに Language does not exist と言われますが，そのままでいこうと思います

とが 2021/12/25

そういえばこれですが，今は

```:text

と書けるようになったんですね！対応ありがとうございます！

とが 2021/01/06

インラインコードの先頭あるいは末尾に空白文字を入れることは可能でしょうか？（` abc` と書いたときに abc の前の空白が消えることを防ぎたいです）
もしよく知られた markdown の書き方だったら申し訳ありません．

Zenn公式 2021/01/06

半角スペースが消えてしまうのは仕様になります。正確にはCSSのwhite-spaceプロパティがデフォルトの値だとこのようになります。

GitHubやdev.toなどITエンジニアがよく使いそうなサイトを一通りチェックしてみたのですが、どのサイトもwhite-spaceの値を変更していなかったため、特別な仕様はなるべく避けたいという理由から今のところZennでも対応予定はないです。先頭・末尾の半角スペースがそのまま反映されることを好まない方もいると思うので…。申し訳ないです。

とが 2021/01/07

なるほど…．了解しました．丁寧な説明ありがとうございます．

とが 2021/02/22

これですが，普通のスペースの代わりに U+2000 を使うというのを思いついたのでこの場に残しておきたいと思います．
` abc` (普通のスペース) → abc
` abc` (U+2000) → abc

knk 2021/01/09

シェア用のURLを取得する方法はありますか？
いつも設定 > スクラップ管理 > articles > 該当記事　とクリックしてリンクを取得しているので共有ボタンみたいなのでURLを取得できると嬉しいです。

こひな(ゆでだこの方🐙)2021/01/19

HTMLタグの埋め込みには対応していないのでしょうか？上付き文字<sup>を使いたいのですが。

Zenn公式 2021/01/20

現時点では<br>以外のHTMLタグの埋め込みには対応していないです（いろいろと事情があり…）。supやsubの対応についてのIssueを作りました。しばらくお待ちいただければと思います。

なお、数式であれば $a^4$ （ $a^4$ ）や $a_1$ （ $a_1$ ）という形で記載ができます。

こひな(ゆでだこの方🐙)2021/01/21

編集画面だとハイライトされるので、対応してないのか、HTMLの書き方が悪いのか、Markdown初心者の私には判断つかなかったので助かりました。
ありがとうございます！

Zenn公式 2021/01/20に更新

コメントが増えてきたため、マークダウンに関する質問や要望などは今後下記のリンク先からお願いします。

daichi-gamedev 2021/10/01に更新

MarkDownで非表示にする方法です。ここにも一応貼らさせてもらいます🙇‍♂️

<!-- 非表示コメントをここに書きます。このxxxを全部消すと非表示になります -xxx->

ただし改行すると無効になってしまいます。改行された複数行を非表示する方法を探しまくったのですが、今の所無い？ようです。なので複数行の場合は改行せずに使うしかありません。

ともキング 2023/06/08

とても丁寧に書かれていて分かりやすかったです！　
とっても助かりました。ありがとうございました😊

ととぴろnote 6ヶ月前

記法について質問です。私は数学の記事を書いているのですが、定理などを枠で囲む方法はございますか？Notionだとcalloutにあたるやつです。

bisque 6ヶ月前に更新

Markdownで表現できることとしては、基本的にはこのページで紹介されているものが全てになります。
少し調べたところ、KaTeXだと boxed を使うと枠を付けられるようですが、いかがでしょうか？

$$
\boxed{\pi=\frac c d}
$$

\boxed{\pi=\frac c d}

ととぴろnote 6ヶ月前

ありがとうございます。試してみます。いつかNotionみたいに楽に書けたらなーって思います。

Ken Okabe 6ヶ月前に更新

#Zenn独自の記法という方言はBadPracticeでしかない。

Markdownは標準的な仕様がないために、これまでこのような好き勝手がまかりとおり、それぞれの実装者がセキュリティに優れていると信じ、各自勝手な文法を乱立させたために混乱が進み、その結果、CommonMarkのようなもので標準化しようという動きもある。

ここの他のコメントも全て、独自方言による混乱でしかないし、GitHubのMarkdown（GFM）で、単に標準的なHTMLのIMGタグで書けていたものが、Zennでは、

![altテキスト](https://画像のURL =250x)

という適当な思いつきであるとしか思えない独自記法にされて、これに適応するためにすべてのMarkdownを書き直すのにどれだけ（無駄な）手間暇がかかるか想像してみてほしい。

kouji0705 2ヶ月前

MarkdownとPreviewは同時に見る方法はないのでしょうか？？
ブラウザで執筆する場合、同時に見える方が書きやすく。

Zenn公式 2ヶ月前

ブラウザのエディターでリアルタイムプレビューはできません。コンテンツをGitHubで管理していただく形になってしまいますが、 github.dev でブラウザから編集することも可能です。ご検討いただけますと幸いです。

sta 26日前に更新

質問

記事というより本の話ですが、アンカーリンクの挙動について質問させてください。

以下のように別ページにジャンプする場合に、アンカーが動作しません（refページは開くが1見出しにまでジャンプしない）。

リンク元、cover-of-teetingページ
- [★1](ref#1)という形でリンクを張っています
リンク先、refページ
- ## 1という形で見出しを書いています
- （これはHTMLレンダリング時は<h2 id="1">となっています）

これはバグでしょうか、あるいは想定された仕様でしょうか。

以下補足です

上記の例( https://zenn.dev/sta/books/teeting-proposal/ )は私が試しに書いた本です
refページ内の目次やアドレスバー直打ちだとちゃんとジャンプします（のでアンカーの書き方が正しくない、などはなさそうです）
昔(2022年2月)書いたときは動作していた気がします

Zenn公式 25日前

こちら調査も含めて以下のISSUEで対応します。

Zenn公式 15日前

こちら修正リリースしました。現在はアンカー付きのURLに直アクセスした場合でも、対応する目次にジャンプした状態で開けます。

ご連絡ありがとうございました。

sta 15日前

確認致しました。ありがとうございます！

見出し

リスト

番号付きリスト

テキストリンク

画像

画像の横幅を指定する

Altテキストを指定する

キャプションをつける

画像にリンクを貼る

テーブル

コードブロック

ファイル名を表示する

diff のシンタックスハイライト

数式

数式のブロックを挿入する

インラインで数式を挿入する

引用

脚注

区切り線

インラインスタイル

インラインのコメント

Zenn 独自の記法

メッセージ

アコーディオン（トグル）

要素をネストさせるには

コンテンツの埋め込み

リンクカード

X（Twitter）のポスト（ツイート）

リプライ元のポストを非表示にする

YouTube

GitHub

行の指定

テキストファイル以外は埋め込めません

GitHub Gist

CodePen

SlideShare

SpeakerDeck

JSFiddle

CodeSandbox

StackBlitz

Figma

オンラインエディターではモーダルから挿入可能

その他の埋め込み可能なコンテンツ

blueprintUE

ダイアグラム

制限事項

クリックイベントの無効化

ブロックあたりの文字数制限 - 2000文字以内

ブロックあたりのChain数制限 - 10以下

入力補完

絵文字（Emoji）

Discussion

質問

以下補足です