見出し
Notion (Heading 1, Heading 2, Heading 3)
Markdown
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
zenn-markdown-html
見出し1
見出し2
見出し3
見出し4
リスト
Notion (Bulleted List)
Markdown
- Hello!
- Hola!
- Bonjour!
- Hi!
zenn-markdown-html
- Hello!
- Hola!
- Bonjour!
- Hi!
番号付きリスト
Notion (Numbered List)
Markdown
1. First
2. Second
zenn-markdown-html
- First
- Second
テキストリンク
Notion (TextにLink)
Markdown
[アンカーテキスト](https://www.kohsuk.tech/)
zenn-markdown-html
画像
Notion (Image)
Markdown
zenn-markdown-html
画像の横幅を指定する
Notion (Text)
Markdown
zenn-markdown-html
キャプションをつける
Notion
NotionのImageのCaptionを利用できます。
Markdown
*キャプション*
zenn-markdown-html
キャプション
画像にリンクを貼る
Notion (Text)
Markdown
[](https://www.kohsuk.tech/)
zenn-markdown-html
テーブル
Notion (Table)
Markdown
| Head | Head | Head |
| ---- | ---- | ---- |
| Text | Text | Text |
| Text | Text | Text |
zenn-markdown-html
| Head | Head | Head |
|---|---|---|
| Text | Text | Text |
| Text | Text | Text |
コードブロック
Notion (Code)
Markdown
const sayHello = () => { console.log("Hello!"); };
zenn-markdown-html
const sayHello = () => {
console.log("Hello!");
};
ファイル名を表示する
NotionのCodeブロックはキャプションをつけることができます。キャプションにファイル名を記載することで、 言語:ファイル名 とMarkdownを出力させることができます。
Notion (Code)
Markdown
hello.jsconst sayHello = () => { console.log("Hello!"); };
zenn-markdown-html
hello.js
const sayHello = () => {
console.log("Hello!");
};
diff のシンタックスハイライト
NotionのCodeブロックにも Diff がありますが、言語とファイル名を指定する欄はありません。
ですので、ここでもCaptionを利用して言語:ファイル名と書くことでMarkdownでの出力に対応しています。
Notion (Code)
Markdown
hello.jsconst sayHello = () => { - console.log("Hello!"); + console.log("Hello, world!"); };
zenn-markdown-html
hello.js
const sayHello = () => {
- console.log("Hello!");
+ console.log("Hello, world!");
};
数式（ブロック）
Notion (Block equation)
Markdown
$$
x^n + y^n = z^n\text{ has no non-zero integer solutions for } x, y, z \text{ when } n > 2.
$$
zenn-markdown-html
数式（インライン）
Notion (Inline equation)
Markdown
$E = mc^2$ の様にインラインで数式を含める
zenn-markdown-html
引用
Notion (Quote)
Markdown
> 引用文
> 引用文
zenn-markdown-html
引用文
引用文
注釈
Notionに対応する記法がないため、テキストブロックに直接記載します。
Notion (Text)
Markdown
注釈は例[^1]の様に書きます。インライン^[注釈の内容2]を書くこともできます。
[^1]: 注釈の内容1
zenn-markdown-html
注釈は例[1]の様に書きます。インライン[2]を書くこともできます。
区切り線
Notion (Divider)
Markdown
---
zenn-markdown-html
インラインスタイル
Notion (Text)
Markdown
_イタリック_
**太字**
~~打ち消し線~~
インラインで `code` を挿入する
zenn-markdown-html
イタリック
太字
打ち消し線
インラインで code を挿入する
インラインのコメント
Notionに該当するブロックがないため、Textブロックに以下の様に記載することで、出力されたMarkdownにHTMLのコメントを挿入します。
Notion (Text)
Markdown
<!— インラインのコメント —>
zenn-markdown-html
<!— インラインのコメント —>
Zenn 独自の記法
メッセージ
Notion (Callout)
Markdown
:::message
🔥 メッセージです。
:::
zenn-markdown-html
アコーディオン（トグル）
Notion (Text)
Markdown
:::details タイトル
内容です。
:::
zenn-markdown-html
タイトル
内容です。
コンテンツの埋め込み
リンクカード
Notion (Web bookmark)
Markdown
@[card](https://www.kohsuk.tech/tech)
zenn-markdown-html
その他の埋め込み
Notionの Embeds で用意されているものについては、順次対応していきます。
ダイアグラム
NotionにMermaindのダイアグラムをリアルタイムで見ながらコードブロックを編集する機能を利用できます。出力結果は以下の通り、 mermaid のコードブロックのMarkdownです。
