mdx docs Download - mdx docs Source Téléchargement du code

mdx docs

Code Source AI

1.0.0

Télécharger

Docs MDX

Documenter et développer des composants React avec MDX et Next.js

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

npm init docs

Créer une documentation avec Markdown
⚛️ Importer et utiliser les composants de la réaction
API basée sur les composants
Exemples de code en direct
? Thèmes personnalisables
▲ construit pour next.js

Commencer

Pour créer un nouveau site de documentation, exécutez npm init docs et suivez les invites. Une fois l'application générée, consultez Readme.md pour plus de documentation.

Pour ajouter des documents MDX à une application Next.js existante, consultez les documents de configuration personnalisés.

Utilisation de mdx

MDX vous permet de mélanger Markdown avec JSX en ligne pour rendre les composants React. Écrivez Markdown comme vous le feriez normalement et utilisez la syntaxe d'importation ES pour utiliser des composants personnalisés dans votre document.

 import { Box } from ' grid-styled '

# Hello MDX!

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

Code en direct

MDX DOCS dispose de composants intégrés pour rendre les blocs de code clôturés JSX en tant que prévisualisation en direct avec du code modifiable, alimenté par React-Live. Pour faire un rendu de bloc de code comme exemple modifiable, utilisez l'attribut de langue .jsx (notez . préfixe).

Live code example:

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

Portée des composants

Pour ajouter des composants à la portée pour une utilisation dans les exemples de code en direct, transmettez un objet components au composant 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 >