要約

このブログの MDX 記事本文で、主要な Markdown 記法を読みやすく表示できるようにした。

今回の主な対応は次のとおり。

• 引用 > と GitHub/Obsidian 風コールアウトの表示
• h1〜h6 の見出し階層
• 通常リスト・番号付きリスト・ネストリスト
• タスクリスト
• 水平線
• 強調・打ち消し線
• 表
• 脚注と脚注から本文への戻りリンク

見出し

記事本文では、見出しの階層がわかるように h1 から h6 まで基本スタイルを用意している。

H1 見出し

H2 見出し

H3 見出し

H4 見出し

H5 見出し

H6 見出し

通常の記事ではページタイトルがすでに h1 なので、本文では ## 以降を使うのがよさそう。

テキスト装飾

本文中では 太字、斜体、打ち消し線、inline code、リンク を使える。

日本語の文章でも、強調したい語句だけを このように 目立たせられる。

引用とコールアウト

引用は左側に線を出して、本文とは別のまとまりとして見えるようにした。

これは引用のサンプル。 複数行にまたがる引用でも、同じ引用ブロックとして表示される。

引用内に段落を分けて書くこともできる。

ひとつめの段落。

ふたつめの段落。引用内でも 強調 や code を使える。

GitHub や Obsidian で使われる [!NOTE] 形式のコールアウトにも対応した。

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Obsidian 風にタイトルを付けることもできる。

カスタムタイトル

タイトル部分を指定した場合は、その文字列を見出しとして表示する。

リスト

通常の箇条書き。

• Markdown
• MDX
• Astro

番号付きリスト。

1. 記法を書く
2. Astro が HTML に変換する
3. ArticleBody の CSS で読みやすく表示する

ネストしたリスト。

• 親項目
  • 子項目
  • 子項目
    • 孫項目
• 別の親項目

タスクリスト。

• blockquote のスタイルを追加
• 見出し階層を追加
• リスト周りの余白を調整
• さらに細かい typography を育てる

コードブロック

コードブロックは、既存のカスタム表示をそのまま使う。

const supportedSyntax = [
  "blockquote",
  "heading",
  "list",
  "table",
  "footnote",
];

console.log(`Supported: ${supportedSyntax.join(", ")}`);

キャプションなしのコードブロックも表示できる。

npm run build

表

表は横幅が足りないときに横スクロールできる。

水平線

話題を区切るための水平線も使える。

脚注

脚注は補足情報を書きたいときに便利。本文中ではこのように参照する¹。

脚注番号をクリックするとページ下部の脚注へ移動し、脚注末尾の参照番号をクリックすると本文の参照位置へ戻れる。

まとめ

これで、このブログの MDX 本文は主要な Markdown 記法をひと通り確認できるようになった。