BlogTemplate-2025.

6つ目の記事

October 11, 2025

これは 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:

脚注の例[1] ともうひとつ[2].

引用(Blockquote)

一段の引用

二段の引用(入れ子)

箇条書き・番号付きリスト・タスクリスト

  • リスト 1
    • ネスト 1-1
    • ネスト 1-2
  • リスト 2
  1. 番号付き 1
  2. 番号付き 2
    1. ネスト 2-1
  • 完了タスク
  • 未了タスク
  • チェックボックス

コードブロック

言語ハイライト(例: TypeScript)

hello.ts
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)

標準:
Zenn ロゴ的な仮画像

代替テキストのみ:
代替テキストだけの画像

相対パス例(Next.js プロジェクト内 public/ を想定):
/images/cover.png がある場合 → ![cover](/images/cover.png)

分割線(Horizontal Rule)


リンクカード(URL を 1 行で)

https://zenn.devhttps://zenn.dev

Tweet(zenn-embed-elements)

: 実運用では zenn-embed-elements のスクリプトを読み込んだ環境で確認してください。

https://twitter.com/jack/status/20https://twitter.com/jack/status/20

YouTube

https://www.youtube.com/watch?v=dQw4w9WgXcQ

Speaker Deck

https://speakerdeck.com/zenn/devrel-2020https://speakerdeck.com/zenn/devrel-2020

CodePen

https://codepen.io/pen/https://codepen.io/pen/

上記の外部埋め込みは、ローカルの 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 行」にする(先頭に >- を付けない)

脚注
  1. これは脚注です。本文末尾に集約されます。 ↩︎

  2. 2つ目の脚注。 ↩︎