MDX와 리액트
Docusaurus는 마크다운 파일 내에 JSX를 작성하고 이를 React 컴포넌트로 렌더링할 수 있는 MDX를 기본적으로 지원합니다.
MDX로 어떤 멋진 작업을 할 수 있는지 알아보려면 MDX 문서를 확인하세요.
MDX 형식은 매우 엄격하여 컴파일 오류가 발생할 수 있습니다.
**MDX playground**를 사용하여 디버깅하고 구문이 유효한지 확인하세요.
가장 널리 사용되는 포맷터인 Prettier는 레거시 MDX v1만 지원합니다. If you get an unintentional formatting result, you may want to add {/* prettier-ignore */}
before the problematic area, or add *.mdx
to your .prettierignore
, until Prettier has proper support for MDX v3. One of the main authors of MDX recommends remark-cli
with remark-mdx
.
컴포넌트 내보내기
To define any custom component within an MDX file, you have to export it: only paragraphs that start with export
will be parsed as components instead of prose.
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}>
{children}
</span>
);
<Highlight color="#25c2a0">도큐사우루스 초록</Highlight>과 <Highlight color="#1877F2">페이스북 파랑</Highlight>은 내가 좋아하는 색입니다.
**마크다운**을 _JSX_와 같이 사용할 수 있습니다!
Notice how it renders both the markup from your React component and the Markdown syntax:
I can write Markdown alongside my JSX!
Since all doc files are parsed using MDX, anything that looks like HTML is actually JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects.
/* 이렇게 쓰지 말고: */
<span style="background-color: red">Foo</span>
/* 이렇게 쓰세요: */
<span style={{backgroundColor: 'red'}}>Foo</span>