MDX サンプル

概要

本サイトで使用可能な MDX のサンプルです。逐次追加していきます。

以下に、MDX 記法を示します。

見出し

## 見出し 2
 
### 見出し 3
 
#### 見出し 4
 
##### 見出し 5
 
###### 見出し 6

見出し 2

見出し 3

見出し 4

見出し 5

見出し 6

見出し1 は使用しません。

SEO ・ユーザビリティの観点から、見出しは h2 から始めてください。また、見出し5 以上は出来るだけ使用しないでください。

スタイリング

**太字**
 
_イタリック_
 
**_太字イタリック_**
 
~~取り消し線~~
 
`インラインコード`

太字

イタリック

太字イタリック

~~取り消し線~~

インラインコード

リンク

内部リンク

[ホーム](/)

ホーム

外部リンク

[Google](https://google.com)

Google

リンクカード

リンクカードは、リンク先の情報を表示するためのコンポーネントです。簡潔な URL を記述することで、自動的にリンクカードが生成されます。

https://github.com/

GitHub · Change is constant. GitHub keeps you ahead.

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

github.com

画像

![Dev placeholder Image](/dev-placeholder.png)

テーブル

| Header 1 | Header 2 | Header 3 |
| :------- | :------: | -------: |
| 1-1      |   1-2    |      1-3 |
| 2-1      |   2-2    |      2-3 |

Header 1	Header 2	Header 3
1-1	1-2	1-3
2-1	2-2	2-3

コードブロック

基本

バッククォート3つで囲むことでコードブロックを記述できます。

対応言語を指定することで、Shiki によるシンタックスハイライトが適用されます。

言語を指定しない場合、プレーンテキストとして表示されます。

```
console.log("Hello World!!");
```

console.log('Hello World!!');

タイトル

```js title="sample.tsx"
console.log("Hello World!!");
```

sample.tsx

console.log('Hello World!!');

行番号

```js showLineNumbers
console.log("Hello World!!");
```

console.log('Hello World!!');

行ハイライト

```js {1}
console.log("Hello World!!");
```

console.log('Hello World!!');

単語のハイライト

```js /Hello/ /Apple/ /World/3-3
console.log('Hello, World!!');
console.log('Hello, Apple!!');
console.log('GoodNight, World!!');
```

console.log('Hello, World!!');
console.log('Hello, Apple!!');
console.log('GoodNight, World!!');

差分表示

```plaintext
// js であるが、 コメントアウトが消えるため、 plaintext で記述
console.log('Hello'); // [!code --]
console.log('World!!'); // [!code ++]
console.log('Diff!!');
```

console.log('Hello');
console.log('World!!');
console.log('Diff!!');

複数指定

複数の属性を同時に指定できます

```tsx title="hello.tsx" showLineNumbers {1-2}
export const Hello = ({ name }: { name: string }) => {
  return <div>Hello, {name}!</div>;
};
```

hello.tsx

export const Hello = ({ name }: { name: string }) => {
  return <div>Hello, {name}!</div>;
};

数式

数式を記述することが出来ます。

追加予定

インライン

数式ブロック

引用

> 引用文 1

引用文 1

脚注

脚注１[^1]
 
[^1]: 脚注の文章

脚注¹

区切り線

---

コメントアウト

{/* コメントアウト */}

フロントマターについて

フロントマターとは、MDXファイルの先頭に記述されるYAML形式のメタデータです。

記事のタイトルや投稿日時などの情報を指定します。

例

ファイル先頭部の --- で囲まれた例のような形式で記述します。

---
published: true
icon: '✍️'
title: 'MDX サンプル'
description: '本サイトで使用可能な MDX のサンプルです。'
date: '2025-02-03T00:00:00+09:00'
lastupdated: '2025-02-15T23:50:00+09:00'
categories:
  - 'news'
tags:
  - 'mdx'
  - 'サンプル'
---

利用可能なプロパティ

以下がこのサイトで利用可能なプロパティです。

プロパティ	必須	値	説明
`published`	true	`true` or `false`	記事を公開するかしないかを指定する。公開しない場合は、執筆モード
`icon`		Unicode Emoji 例: `&#x1F389` -> 🎉	記事のアイコンを指定
`title`	true	`string`	記事のタイトル名を指定
`date`	true	`YYYY-MM-DDTHH:mm:ss+09:00`	記事の公開日時を指定
`lastupdated`		`YYYY-MM-DDTHH:mm:ss+09:00`	記事の更新日時を指定
`categories`	true	カテゴリのリスト	記事のカテゴリを指定使用可能なカテゴリを確認
`tags`	true	タグのリスト	記事のタグを指定

コールアウト

コールアウトは、特定の文章を目立たせるためのスタイルです。

追加予定

埋め込み

埋め込みは、外部のコンテンツを記事内に表示するための機能です。 oEmbed に対応したサイトの URL を簡潔に記述することで、自動的に埋め込みが生成されます。

現時点で、YouTube の埋め込み以外は、ユーザーの入力によって読み込みが開始されます。これは、外部リソースの読み込みによる初期表示の遅延を防ぐためです。

https://www.youtube.com/watch?v=cyFVtaLy-bA

YouTube

YouTube の動画・再生リストを埋め込むことが出来ます。

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

https://www.youtube.com/playlist?list=**

Canva

Canva のデザイン・スライドを埋め込むことが出来ます。

https://www.canva.com/design/**

Unsupported client – Canva

www.canva.com

CodePen

CodePen のペンを埋め込むことが出来ます。

https://codepen.io/pen/

A Simple CodePen Example (feat. HTML, CSS, & JavaScript)

https://codepen.io

Spotify

Spotify のプレイリストを埋め込むことが出来ます。

https://open.spotify.com/playlist/

Top 50 - Japan

https://spotify.com

MDX / JSX

MDX とは、Markdown の中に React Component や JSX を埋め込むことが出来る記法です。

本サイトでは、以下のようなカスタムコンポーネントを事前に提供しています。

タブレイアウト

複数のコンテンツをタブ切り替えによって提供するコンポーネントです。

※ UX を低下させる可能性があります。

{/* prettier-ignore */}
<TabLayout>
  <div title="TSX">
    ```tsx title="Counter.tsx" showLineNumbers
    'use client';
    // ...
    ```
  </div>
  <div title="Result">
  <Counter />
  </div>
  <div title="Image">
  ![Sample Image](/dev-placeholder.png)
  </div>
</TabLayout>

Counter.tsx

'use client';
 
import { useState } from 'react';
 
export const Counter = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p className="text-2xl font-bold">Counter</p>
      <div className="flex items-center gap-4">
        <button className="rounded-md bg-card p-2" onClick={() => setCount(count - 1)}>
          -
        </button>
        <span>{count}</span>
        <button className="rounded-md bg-card p-2" onClick={() => setCount(count + 1)}>
          +
        </button>
      </div>
    </div>
  );
};

二段レイアウト

二段構えのレイアウトを提供するコンポーネントです。

{/* prettier-ignore */}
<TwoGridLayout>
  <div>
    ```plaintext
    左
    ```
  </div>
  <div>
    ```plaintext
    右
    ```
  </div>
</TwoGridLayout>

左

右

カスタムコンポーネントの追加

独自のコンポーネントを追加することが出来ます。

現状、事前に動的に記事を JSON に変換する都合上、 MDX ファイル内での import でコンポーネントを読み込むことができません。

実装手順

contents/components 内にコンポーネントファイルを作成

contents/components/index.tsx にコンポーネントを追加

import { Counter } from './Counter';
 
/**
 * Content components
 * An object that aggregates components used in Posts and Pages.
 */
export const ContentComponents = {
  // Below add your components
  Counter,
};

posts・pages 全域で使用可能になります。

Footnotes

脚注の文章 ↩