nishimura.clubnishimura.club
nishimura.clubnishimura.club

MDX プレビュー

概要

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

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

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

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

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

LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText

LongText

ヘッダー (Header)

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)

NameAge
Taro18

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

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

リスト表示 (List)

  • A
  • B
  • C

番号付き表示

  1. A
  2. B
  3. C

リンク表示

通常

[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)

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

Logo

MP3/MP4

調査中

HTML

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

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

赤い文字

使用したライブラリ

参考文献

準備中

Share

Table of Contents

概要LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextヘッダー (Header)H2(Header2)コードテーブル表示 (Table)リスト表示 (List)番号付き表示リンク表示太字 (Bold) etc水平線 (Horizon)数式 (Math)画像 (Image)MP3/MP4HTML使用したライブラリ参考文献