ZennのMarkdown記法

公開:2020/09/06
更新:2021/03/03
5 min読了の目安(約5200字TECH技術記事 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が正しく認識されない場合

マークダウンパーサの事情からアンダースコア(_)を含む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?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をそのまま括弧の中に入力します。

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

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

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

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