mdx docs 다운로드 -MDX mdx docs 소스 코드 다운로드

mdx docs

AI 소스 코드

1.0.0

다운로드

MDX 문서

MDX 및 Next.js를 사용하여 React 구성 요소를 문서화하고 개발하십시오

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

npm init docs

Markdown으로 문서를 만듭니다
⚛️ React 구성 요소를 가져오고 사용합니다
구성 요소 기반 API
라이브 코드 예제
? 사용자 정의 가능한 테마
▲ Next.js를 위해 제작되었습니다

시작하기

새 문서 사이트를 만들려면 npm init docs 실행하고 프롬프트를 따르십시오. 응용 프로그램이 생성되면 더 많은 설명서는 readme.md를 참조하십시오.

기존 Next.js 앱에 MDX 문서를 추가하려면 사용자 정의 설정 문서를 참조하십시오.

MDX 사용

MDX를 사용하면 Markdown이 인라인 JSX와 혼합하여 React 구성 요소를 렌더링 할 수 있습니다. 평소와 같이 Markdown을 작성하고 ES 가져 오기 구문을 사용하여 문서에서 사용자 정의 구성 요소를 사용하십시오.

 import { Box } from ' grid-styled '

# Hello MDX!

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

라이브 코드

MDX Docs에는 JSX 펜스 코드 블록을 Real-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 >