mdx docsダウンロードmdx docsソースコードのダウンロード

mdx docs

AI ソースコード

1.0.0

ダウンロード

MDXドキュメント

MDXおよびnext.jsを使用した反応コンポーネントを文書化および開発します

https://mdx-docs.now.sh/

npm init docs

Markdownでドキュメントを作成します
Reactコンポーネントをインポートおよび使用します
コンポーネントベースのAPI
ライブコードの例
？カスタマイズ可能なテーマ
▲next.js用に構築されました

はじめる

新しいドキュメントサイトを作成するには、 npm init docsを実行し、プロンプトに従います。アプリケーションが生成されたら、詳細についてはreadme.mdを参照してください。

既存のnext.jsアプリにMDXドキュメントを追加するには、カスタムセットアップドキュメントを参照してください。

MDXを使用します

MDXを使用すると、マークダウンとインラインJSXを混合して反応成分をレンダリングできます。通常のようにマークダウンを書き込み、ESインポート構文を使用してドキュメント内のカスタムコンポーネントを使用します。

 import { Box } from ' grid-styled '

# Hello MDX!

< Box
  p = { 3 }
  bg = ' tomato ' >
  This will render as a component
</ Box >

ライブコード

MDX Docsには、JSXフェンスで囲まれたコードブロックを編集可能なコードを使用したライブプレビューとしてレンダリングするコンポーネントが組み込まれています。編集可能な例としてコードブロックレンダリングを作成するには、 .jsx言語属性を使用します（注.プレフィックス）。

Live code example:

``` .jsx
< button > Beep < / button >
```

コンポーネントスコープ

ライブコードの例で使用するスコープにコンポーネントを追加するには、 componentsオブジェクトをLayoutコンポーネントに渡します。

 // example components
import React from 'react'

export default {
  Box : props => (
    < div
      { ... props }
      style = { {
        padding : '32px' ,
        backgroundColor : 'tomato'
      } }
    />
  )
}

 // example _app.js
< Layout
  { ... this . props }
  components = { components } >
  < Layout . Main >
    < Component { ... page } />
  </ Layout . Main >
</ Layout >