👩‍💻

ZennのMarkdown記法一覧

commits7 min read 58

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

見出し

# 見出し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による数式表示に対応しています。
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 タイトル
表示したい内容
:::
タイトル

表示したい内容

分かりづらいのですが「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 ↩︎

GitHubで編集を提案

Discussion

こんばんは。
CLIがあって、ローカルでプレビューしながら記事が書けるのがすごく良いです😆

ひとつ質問なのですが、本文(コードブロック)にタブがあると、プレビュー内では半角スペース8個分のインデントになるのですが、このスペースの数を調整することは可能でしょうか?

おや、本当ですか!原因究明&改善するのでしばらくお待ちください🙏

ありがとうございます。どうぞよろしくお願いします🙇‍♂️

早速ご対応いただき、ありがとうございました!

Zenn UIも素敵で乗り換え検討したいです!
ただひとつ困ってるのがあって、
ts:main.ts
みたいにコードブロックにファイル名付けられると嬉しいです!

こんばんは。素晴らしいサイトですね!
一つ質問です。コードブロックで指定した行数にハイライトを当てることはできますでしょうか?🙋‍♂️

現状できないのですがコードブロックのファイル名と合わせて検討してみます。

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

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

https://juliadocs.github.io/Documenter.jl/dev/showcase/

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

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

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

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

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

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

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

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

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

ありがとうございます!

とても良いサービスをありがとうございます!!!

画像のリンクどうやるのかな?と迷ったので、以下で出来ることも追記してもらえるといいかもと思いました!

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

ありがとうございます。追記します!

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

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

First Line
Second Line

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

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

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

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

リンクカードについて要望です。https://play.google.com/store/apps/details?id=~&hl=ja このように言語が指定されているとカード化しません。https://play.google.com/store/apps/details?id=~ と言語指定を外すとカード化されます。しかし「英語」になってしまうので、改善いただけませんでしょうか。

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

中身 改行
したい
です

ありがとうございます!

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

zennのマークダウン記法へのリンクが現在は「埋め込みボタン」内にありますが、編集画面からすぐ見れるトップレベルにあるといいかなと思いました。(zenn書いてる方々はmd記法なんていまさら見ない強者が多いので需要か全然ないかも知れませんが…)

対応しました。「?」ボタンとして配置しました。

先程登録したばかりです。ctrl-Fでのページ内検索が出来ないのですが、仕様なのでしょうか?
主にQiitaで投稿しておりましたが、使いやすそうならこちらでもお世話になろうかなと思います。よろしくお願い致します。

Ctrl + Fが使えないのはどちらのページでしょうか?

PC再起動したら出来るようになりました...。お騒がせして申し訳ないです!

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

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

```-:text

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

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

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

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

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

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

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

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

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

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

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

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

ログインするとコメントできます