Docusaurus - 02. mdx 확장자

📍참고

https://docusaurus.io/docs/markdown-features/react

MDX and React | Docusaurus

 

📍마크다운에서 JSX 사용하기

- .mdx 확장자는 마크다운에서 jsx를 사용할 수 있게 해준다

- .mdx 내의 jsx는 리액트 컴포넌트처럼 렌더링된다

 

📍MDX는 JSX이다

- HTML 스타일 대신 JSX 스타일을 사용해야 한다

/* Instead of this: */
<span style="background-color: red">Foo</span>
/* Use this: */
<span style={{backgroundColor: 'red'}}>Foo</span>

 

📍컴포넌트 import 하기

- mdx에서 다른 파일에서 작성된 컴포넌트 또는 다른 라이브러리의 컴포넌트 (아이콘 등) 를 import할 수 있다

 

📍마크다운 import 하기

- mdx 파일을 컴포넌트처럼 import 할 수 있다

- mdx 파일이름 앞에 _를 붙여서 독자적으로 렌더링되지 않는다고 표현한다

 

_markdown-partial-example.mdx

<span>Hello {props.name}</span>

This is text some content from `_markdown-partial-example.mdx`.

 

someOtherDoc.mdx

import PartialExample from './_markdown-partial-example.mdx';

<PartialExample name="Sebastien" />