ZennのMarkdown記法一覧

commits7 min read読了の目安(約7000字 58

このページでは Zenn のマークダウン記法を一覧で紹介します。

見出し

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

リスト

- Hello!
- Hola!
  - Bonjour!
  * Hi!
  • Hello!
  • Hola!
    • Bonjour!
    • Hi!

リストのアイテムには*もしくは-を使います。

番号付きリスト

1. First
2. Second
  1. First
  2. Second

テキストリンク

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

アンカーテキスト
Ctrl + Kのショートカットでも挿入できます。

画像

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

altテキスト

画像の横幅を指定する

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

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

altテキスト

キャプションをつける

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

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


captions

画像にリンクを貼る

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

[![altテキスト](画像の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 のシンタックスハイライト

2021/01/25〜、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による数式表示に対応しています。

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

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

$$
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 タイトル
表示したい内容
:::
タイトル

表示したい内容

分かりづらいのですが「detail」ではなく「details」です。

コンテンツの埋め込み

リンクカード

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

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

https://zenn.dev/zenn/articles/markdown-guide

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

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

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

https://zenn.dev/__example__

https://zenn.dev/example

対処法

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

ツイート

# ツイートのURLだけの行(前後に改行が必要です)
https://twitter.com/jack/status/20

以前は@[tweet](ツイートのURL)の記法を採用していましたが、2020/12/27〜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)という記法を採用していましたが、2021/03/03〜URL を貼り付けるだけで動画を埋め込むことが可能になりました。

GitHub Gist

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

2020/12/28〜対応しました。特定のファイルだけ埋め込みたい場合は@[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)

CodeSandbox

@[codesandbox](embed用のURL)

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

StackBlitz

@[stackblitz](embed用のURL)

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

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

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

ダイアグラム

2021/06/08〜、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]
```

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

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 に従っていますので、どのように書けばよいかは公式サイトの文法を参照してください。

mermaid.js側で破壊的変更が行われた場合、表示が変更されたり、適切に表示されなくなる可能性があります。

制限事項

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

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

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

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

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

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

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

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

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

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

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

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

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