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，反应

麻省理工学院许可证