ดาวน์โหลด mdx docs - ดาวน์โหลดซอร์สโค้ดเอกสาร mdx docs

mdx docs

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

เอกสาร MDX

จัดทำเอกสารและพัฒนาส่วนประกอบ React ด้วย mdx และ next.js

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

npm init docs

สร้างเอกสารด้วย Markdown
⚛นำเข้าและใช้ส่วนประกอบปฏิกิริยา
API ที่ใช้ส่วนประกอบ
ตัวอย่างรหัสสด
- ธีมที่ปรับแต่งได้
▲สร้างขึ้นสำหรับ next.js

เริ่มต้น

ในการสร้างไซต์เอกสารใหม่ให้เรียกใช้ npm init docs และทำตามพรอมต์ เมื่อแอปพลิเคชันถูกสร้างขึ้นให้ดูที่ readme.md สำหรับเอกสารเพิ่มเติม

หากต้องการเพิ่มเอกสาร MDX ลงในแอป Next.js ที่มีอยู่ให้ดูที่เอกสารการตั้งค่าที่กำหนดเอง

ใช้ mdx

MDX ช่วยให้คุณผสมผสานการทำเครื่องหมายด้วย Inline JSX เพื่อแสดงส่วนประกอบที่ตอบสนอง เขียน 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 >