みどりみちのブログ

MDX Components

👀 components/mdx

affiliate

affiliate -> Affiliate

asin: string
id: string
label: string   // 商品名

<affiliate asin="xxx" id="xxx" label="xxx" />

code-block

code -> CodeBlock

children: string
className: string
name?: string       // コードのファイル名
hide_nums?: boolean = false // 行番号非表示
hl_lines?: string   // ハイライト行 numbers
ins?: string        // 挿入行 numbers
del?: string        // 削除行 numbers
inline_hl?: string  // 部分ハイライト 行番号:単語番号 number ':' numbers (';' number ':' numbers)*
/*
number = [0-9]+
range = number '-' number
number_or_range = number | range
numbers = number_or_range (',' number_or_range)*
*/

```lang name=xxx.lang hl_lines=1,2-3 inline_hl=1:2-3;2:1,5-6
xxx
```

fukidashi

fukidashi -> Fukidashi

children: string | ReactElement
face?: 'ase' | 'neut' | 'normal' = 'normal'   // 画像の種類

<fukidashi>xxx</fukidashi>
<fukidashi face='ase'>xxx</fukidashi>

icode

code がコードブロックとして解析されるため、インラインコード用に。

children: string

<icode>xxx</icode>

inlink

ページ内リンク用。

to: string
children: string  // markdown 対応

<inlink to="#xxx">aaa</inlink>

manga

manga-text と一緒に使う。

manga -> Manga

src: string   // 画像のファイル名（拡張子なし）
alt: string   // 代替テキスト
children: Element

manga-text

manga と一緒に使う。

manga-text -> MangaText

x: number     // 左端からの距離
y: number     // 上端からの距離
text: string  // 表示する内容 マークダウン・tltp 対応
size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' = 'xl'  // テキストの大きさ
color?: string    // テキストの色

<manga src="xxx" alt="xxx">

<manga-text x={d} y={d} text="xxx" />

</manga-text>

postimage

postimage -> PostImage

src: string   // 画像のファイル名（拡張子なし）
alt: string   // 代替テキスト

<postimage src="xxx" alt="xxx" />

pstlk

pstlk -> PostLink

label: string   // 表示するテキスト
to: string      // リンク先のスラッグ

<pstlk label="xxx" to="xxx" />

relpos

relpos -> RelatedPost

link: string  // リンク先のスラッグ

<relpos link="xxx" />

sandbox

sandbox -> Sandbox

name: string  // 代替テキストに使われるプロジェクト名
link: string  // リンク URL

<sandbox name="xxx" link="xxx" />

tltp

tltp -> Tooltip

label: string   // もとのテキスト
children: string | ReactElement   // ツールチップ内のテキスト マークダウン対応

<tltp label="xxx">xxx</tltp>

id: string

<tweet id="xxx" />

video

video -> Video

src: string   // 動画のファイル名（拡張子なし）
control?: boolean = false   // コントロール領域を表示する

<video src="xxx" />
<video src="xxx" control />

yout

yout -> YouTube

id: string

<yout id="xxx" />

midorimici / nextjs-blog Goto Github PK

nextjs-blog's Introduction