تنزيل mdx docs - تنزيل رمز مصدر mdx docs

mdx docs

كود الذكاء الاصطناعي

1.0.0

تنزيل

مستندات MDX

توثيق وتطوير مكونات React مع MDX و Next.js

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

npm init docs

إنشاء توثيق مع تخفيض الطلب
⚛ استيراد واستخدام مكونات رد الفعل
API القائم على المكون
أمثلة رمز مباشر
؟ موضوعات قابلة للتخصيص
▲ بنيت لـ Next.js

ابدء

لإنشاء موقع توثيق جديد ، قم بتشغيل npm init docs واتبع المطالبات. بمجرد إنشاء التطبيق ، راجع readMe.md لمزيد من الوثائق.

لإضافة مستندات MDX إلى تطبيق NEXT.JS موجود ، راجع مستندات الإعداد المخصصة.

باستخدام MDX

يتيح لك MDX خلط Markdown مع JSX المضمّن لتقديم مكونات React. اكتب Markdown كما تفعل عادة واستخدام Syntax Import لاستخدام مكونات مخصصة في المستند الخاص بك.

 import { Box } from ' grid-styled '

# Hello MDX!

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

رمز مباشر

تحتوي مستندات MDX على مكونات مدمجة لتقديم كتل التعليمات البرمجية المسيجة 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 >