mdx docs

MDX文檔

文檔和開發與MDX和NEXT.JS的REACT組件

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

npm init docs

• 用降價創建文檔
• ⚛️導入和使用React組件
• 基於組件的API
• 實時代碼示例
• ？可自定義的主題
• ▲為Next.js構建

入門

要創建一個新的文檔網站，請運行npm init docs並遵循提示。生成應用程序後，有關更多文檔，請參見readme.md。

要將MDX文檔添加到現有的Next.js應用程序中，請參見自定義設置文檔。

使用MDX

MDX使您可以將Markdown與Inline JSX混合在一起，以呈現React組件。按照往常的方式編寫標價，並使用ES導入語法在您的文檔中使用自定義組件。

 import { Box } from ' grid-styled '

# Hello MDX!

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

實時代碼

MDX DOCS具有內置組件，可將JSX圍欄代碼塊作為帶有可編碼代碼的實時預覽，由React Live提供動力。要使代碼塊渲染作為可編輯的示例，請使用.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 >

components對像還可以包括以呈現MDX中HTML元素的組件。

文件

• 成分
• 自定義設置

---

先前的藝術

MDX-GO，Compositor X0，MDX-Deck，Live-Doc，Mark醫生，Docz

有關的

Next.js，MDX，反應

麻省理工學院許可證