MDX プレビュー

概要

このページはMDXを使用して作成されています。MDX とは、Markdownに加えてJSXを使用することができます。Markdown を書くと同時に React コンポーネントなどを埋め込むことができ、チャートやアラートなどリッチな表現をすることができます。

既存の CMS の代替に MDX を使用することはいくつかのメリットがあります。

編集が容易になる
Git と統合することによりバージョン管理が容易になる

一方デメリットもあります。

検索パフォーマンスの低下
データ管理が難しくなる

LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText

LongText

H1 ~ H3 までに style を当てています。(H4 以下は当てていません。)

H2 には、参照しやすいように Hover でクリップアイコンが表示されます。

クリップアイコンをクリックすると、リンクがコピーされます。

H1(Header1)

# H1

H2(Header2)

## H2

H3(Header3)

### H3

コード

コードブロック (Code Block)

プログラミング言語がハイライト表示されます。

また、コードブロック右上をクリックするとコードがコピーされます。

let name = 'test';

ファイル名が表示されます。

index.js
let name = "test";

ディレクトリ名が表示されます。

src/index.js
let name = "test";

何も prefix がない場合は、plaintext です。

let name = "test"

インラインコード (Code Inline)

`index.js`

で表示します。

index.js

テーブル表示 (Table)

Name	Age
Taro	18

{/* TODO: React Hydration Error */} {/* ## 引用表示 (Blockquote)

よろしくお願い致します。 */}

リスト表示 (List)

番号付き表示

リンク表示

通常

[Text](Link)で埋め込みます。

Nishimura Club ⚡️

そのままテキストで埋め込むと、下記のように表示されます。

Giphy

iframe で埋め込みます。

via GIPHY

OGP

調査中

Youtube

iframe で埋め込む。

SoundCloud

調査中

Twitter Tweet

you're doing great, even if your Tweets aren't

— Twitter (@Twitter) November 17, 2021

太字 (Bold) etc

Normal

Bold

斜線

italic

水平線 (Horizon)

---で表示します。

数式 (Math)

調査中

画像 (Image)

![画像の名前](画像パス)

MP3/MP4

調査中

HTML

HTML を Markdown ファイルに書くと、そのまま表示されます。

<p style="color: red;">赤い文字</p>

赤い文字

使用したライブラリ

参考文献

準備中