これは Zenn の Markdown(zenn-markdown-html) が正しく適用されるかをまとめて検証できるチートシートです。
1つのファイルで主な書式がレンダリングされるか確認できます。
見出し(Headings)
H1 見出し
H2 見出し
H3 見出し
H4 見出し
H5 見出し
H6 見出し
段落のテスト。行末に 2 スペース␠␠で
改行のテスト。
強調・インライン要素
通常テキスト、太字(bold)、斜体(italic)、取り消し、
インラインコード、<u>下線(HTML)</u>、<sub>下付き</sub>、<sup>上付き</sup>、
リンク と https://zenn.dev。
絵文字(:rocket: :sparkles:): :rocket: :sparkles:
引用(Blockquote)
一段の引用
二段の引用(入れ子)
箇条書き・番号付きリスト・タスクリスト
- リスト 1
- ネスト 1-1
- ネスト 1-2
- リスト 2
- 番号付き 1
- 番号付き 2
- ネスト 2-1
- 完了タスク
- 未了タスク
- チェックボックス
コードブロック
言語ハイライト(例: TypeScript)
export const greet = (name: string) => `Hello, ${name}!`;
console.log(greet("Zenn"));
行番号を確認(テーマによっては既定で表示されます)
function add(a, b) {
return a + b;
}
console.log(add(2, 3));
シェルコマンド:
# インストール
yarn add zenn-markdown-html zenn-embed-elements zenn-markdown-css
# 変換の例
node scripts/convert.mjs
テーブル(Tables)
| 項目 | 説明 | 備考 |
|---|---|---|
| A | 表の表示 | GFM 互換 |
| B | 列の整列 | :--- / :---: / ---: |
| 左寄せ | 中央 | 右寄せ |
|---|---|---|
| left | center | right |
| 123 | 456 | 789 |
画像(Images)
標準:
代替テキストのみ:
相対パス例(Next.js プロジェクト内 public/ を想定):
/images/cover.png がある場合 → 
分割線(Horizontal Rule)
埋め込み(Embed / Link Card)
リンクカード(URL を 1 行で)
Tweet(zenn-embed-elements)
注: 実運用では
zenn-embed-elementsのスクリプトを読み込んだ環境で確認してください。
https://twitter.com/jack/status/20
YouTube
Speaker Deck
https://speakerdeck.com/zenn/devrel-2020
CodePen
上記の外部埋め込みは、ローカルの Markdown プレビューではプレーンリンクのままに見えることがあります。Zenn 環境(もしくは
zenn-embed-elementsを読み込んだ本番/プレビュー)で確認してください。
メッセージ/詳細ブロック(Containers)
Zenn では以下のようなコンテナ記法が使えます。
message
details(折りたたみ)
詳細を表示
ここに折りたたみの内容を書きます。長文や補足を入れるのに便利。
目次(Table of Contents)
[toc] を本文中に置くと目次が生成されます(このファイルの冒頭に配置済み)。
数式について
Zenn の標準では数式(KaTeX/MathJax)はサポート対象外です(2025-10 現在)。
必要な場合は画像化するか、独自にレンダラを追加してください。
改行と空行の扱い
行末に 2 スペースを入れると
明示的な改行になります。
空行を挟むと段落が分かれます。
参考:よくある詰まりポイント
- 画像や埋め込みが表示されない → 画像パス/公開範囲、
zenn-embed-elementsの読み込みを確認 - コードブロックの言語名が効かない → フェンス(
```lang)の指定ミスに注意 - 目次が出ない →
[toc]を本文中の適切な位置に入れる - リンクカードが出ない → URL を「単独の 1 行」にする(先頭に
>や-を付けない)