mdx docs Скачать - mdx docs Скачать исходный код

mdx docs

AI Исходный код

1.0.0

Скачать

MDX DOCS

Документировать и разрабатывать компоненты React с mdx и next.js

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

npm init docs

Создать документацию с Marckdown
⚛ Импорт и использование компонентов React
API на основе компонентов
Примеры живого кода
? Настраиваемые темы
▲ Построен для следующего.js

Начиная

Чтобы создать новый сайт документации, запустите npm init docs и следуйте подсказкам. После того, как приложение было сгенерировано, см. Redectme.md для получения дополнительной документации.

Чтобы добавить документы MDX в существующее приложение Next.js, см. Документы на заказ.

Использование MDX

MDX позволяет смешивать отметки с встроенным JSX для отображения компонентов React. Напишите Markdown, как обычно, и используйте синтаксис импорта 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 >