Unduh mdx docs - Unduh Kode Sumber mdx docs

mdx docs

Kode Sumber AI

1.0.0

Unduh

MDX Docs

Mendokumentasikan dan mengembangkan komponen bereaksi dengan mdx dan next.js

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

npm init docs

Buat dokumentasi dengan Markdown
⚛️ Impor dan gunakan komponen bereaksi
API berbasis komponen
Contoh Kode Langsung
? Tema yang dapat disesuaikan
▲ Dibangun untuk Next.js

Memulai

Untuk membuat situs dokumentasi baru, jalankan npm init docs dan ikuti petunjuknya. Setelah aplikasi dihasilkan, lihat readme.md untuk dokumentasi lebih lanjut.

Untuk menambahkan dokumen MDX ke aplikasi Next.js yang ada, lihat dokumen Pengaturan Kustom.

Menggunakan mdx

MDX memungkinkan Anda mencampur markdown dengan inline JSX untuk membuat komponen bereaksi. Tulis markdown seperti biasanya dan menggunakan sintaks impor ES untuk menggunakan komponen khusus dalam dokumen Anda.

 import { Box } from ' grid-styled '

# Hello MDX!

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

Kode Langsung

MDX Docs memiliki komponen bawaan untuk membuat blok kode berpagar JSX sebagai pratinjau langsung dengan kode yang dapat diedit, ditenagai oleh react-live. Untuk membuat render blok kode sebagai contoh yang dapat diedit, gunakan atribut bahasa .jsx (perhatikan . .

Live code example:

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

Lingkup komponen

Untuk menambahkan komponen ke ruang lingkup untuk digunakan dalam contoh kode langsung, berikan objek components ke komponen 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 >