ADVERTISEMENT BY JUSTSYSTEMS AMERICA, INC.
SMARTER LEARNING

【サンプル】MDX記事の書き方と構文ガイド

記事作成に使える MDX記法 とレイアウトのルール一覧

Last Updated:
5 min read

「会話の吹き出しやマーカー強調はどうやって書けばいいですか?」

「このサンプルファイルの書き方をそのまま真似して執筆すれば大丈夫です!」

この記事は、実際にレンダリングされる表示結果を確認しながらMDXの書き方を学べるサンプル記事です。文章中の特定キーワードをハイライトしたい場合は、アンダースコアで囲んで記述します: ハイライト表示。

1. 見出しと画像の埋め込み

画像の説明テキスト
キャプション

見出しタイトルは ## **1. セクションタイトル** のように太字を組み合わせます。画像ファイルを挿入する際は、この index.mdx と同じフォルダ内に配置し、上記のように相対パス(./sample.png)で指定してください。

基本記法のルールは以下の通りです:

  • 吹き出し記法: 前後を :::balloon[left] または :::balloon[right] で囲む
  • マーカー強調: 文字を __テキスト__ または __**太字テキスト**__ で囲む
  • 画像参照: 必ず ./ から始まる相対パスで指定する

2. 比較表(テーブル)の作成

機能比較やデータを整理する際はMarkdownテーブルを使用します。セル内でも独自記法をそのまま適用できます:

機能・記法MDXの書き方実際の表示イメージ
マーカー強調__テキスト__マーカーが引かれます
吹き出し(左):::balloon[left]左側に配置される会話バブル
画像埋め込み![alt](./sample.png "caption")同階層の画像を表示

3. まとめと次のステップ

新しい記事を書く時は、_sample フォルダごとコピーしてディレクトリ名を新しい記事の識別子(スラッグ)に変更し、この index.mdx を上書き編集してください。