表示サンプル

これは、本文の表示を確認するためのサンプル記事です。サイトのデザインを変えたときに、各要素の見た目をまとめて確かめるのに使えます。不要になったら、content/posts/samples/ フォルダごと削除してください。

この記事は content/posts/samples/mdx-sample.mdx に書かれています。Markdown の記法に加えて、MDX では JSX や JavaScript の式をそのまま書けます。

文字の装飾#

太字、斜体、取り消し線、インラインコード、リンク(新しいタブで開く)が使えます。URL はそのまま書いてもリンクになります: https://mdxjs.com/(新しいタブで開く)

引用はこのように表示されます。

リスト#

• 箇条書き
  • 入れ子の項目
• もう一つの項目

1. 番号付きの項目
2. 次の項目

• 完了したタスク
• 未完了のタスク

表#

コード#

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

ファイル名の表示と、行の強調もできます。

export function greet(name: string): string {
  const message = `Hello, ${name}!`;
  return message;
}

画像#

幅と位置を指定し、クリックで拡大できるようにした画像です。

脚注#

本文に注釈を付けられます¹。番号をクリックするとページ下部の注釈に移動し、注釈の末尾のリンクで元の位置に戻れます²。

MDX ならではの書き方#

JavaScript の式を埋め込めます。このページで紹介した機能は 5 個です。

• 見出し
• リスト
• 表
• 脚注
• JSX

JSX の要素も直接書けます。