mdx docs Download - mdx docs Quellcode Download

mdx docs

AI-Quellcode

1.0.0

Herunterladen

MDX -Dokumente

Dokumentieren und entwickeln Sie React -Komponenten mit MDX und Next.js

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

npm init docs

Erstellen Sie Dokumentation mit Markdown
⚛️ Importieren und verwenden Sie React -Komponenten
Komponentenbasierte API
Beispiele für Live -Code
? Anpassbare Themen
▲ gebaut für Next.js

Erste Schritte

Um eine neue Dokumentationsseite zu erstellen, führen Sie npm init docs aus und befolgen Sie die Eingabeaufforderungen. Sobald die Anwendung generiert wurde, finden Sie im Readme.md weitere Dokumentation.

Weitere Informationen zu MDX -Dokumenten zu einer vorhandenen Next.js -App finden Sie in den benutzerdefinierten Setup -Dokumenten.

Mit MDX

Mit MDX können Sie den Markdown mit Inline JSX mischen, um die Reaktionskomponenten zu rendern. Schreiben Sie Markdown wie gewohnt und verwenden Sie die ES -Importsyntax, um benutzerdefinierte Komponenten in Ihrem Dokument zu verwenden.

 import { Box } from ' grid-styled '

# Hello MDX!

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

Live -Code

MDX DOCS verfügt über integrierte Komponenten, um JSX-Codeblöcke als Live-Vorschau mit bearbeitbarem Code zu rendern, die von React-Live betrieben werden. Verwenden Sie das .jsx -Sprachattribut (beachten Sie . Präfix).

Live code example:

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

Komponenten Umfang

Um Komponenten für die Verwendung in den Live -Code -Beispielen Komponenten hinzuzufügen, übergeben Sie ein components an die 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 >