MDX 문법 검사기

MDX 문법 검사기 사용 가이드

MDX는 Markdown 안에 React 컴포넌트를 쓸 수 있는 형식이라 Docusaurus, Next.js, Astro 문서에서 많이 씁니다. 하지만 일반 Markdown에서는 괜찮던 표기 때문에 빌드가 실패하는 경우가 많습니다. 이 검사기는 그런 흔한 원인을 줄 번호와 함께 찾아 줍니다.

<!-- --> HTML 주석(MDX에서는 {/* */}를 써야 함), <https://…> 자동 링크(MDX에서는 태그로 읽힘), 닫히지 않거나 엉뚱하게 닫힌 태그, 짝이 맞지 않는 { } 중괄호를 검사합니다. <br>, <img> 같은 빈 요소와 />로 닫은 태그는 짝이 필요 없는 것으로 봅니다.

``` 코드 블록 안, `한 줄 코드` 안, import·export 줄은 검사에서 빼므로 코드 예시 때문에 오탐이 나지 않습니다. 문제가 없으면 '통과'가 나옵니다.

사용 방법

1. 1'MDX 내용' 칸에 .mdx 파일 내용을 붙여 넣습니다.
2. 2'실행'을 누르면 '6행: <Inner> 태그가 닫히지 않았습니다' 같은 문제가 나옵니다.
3. 3알려 준 줄을 고친 뒤 다시 실행해 '통과'가 나오면 빌드합니다.

import Card from "./Card"

# MDX
<!-- 주석 -->
<Card title={"x"}>
  <Inner>
</Card>
<https://a.com>
</Stray>
문장 { 열림

4행: MDX에서는 HTML 주석(<!-- -->)을 쓸 수 없습니다. {/* 주석 */}으로 바꾸세요
6행: <Inner> 태그가 닫히지 않았습니다
8행: MDX에서는 <https://…> 자동 링크를 쓸 수 없습니다. [글자](주소)로 바꾸세요
9행: 여는 태그 없이 </Stray>가 나옵니다
10행: { 가 닫히지 않았습니다

이럴 때 쓰면 좋아요

• Docusaurus·Next.js 문서 빌드가 MDX 오류로 멈췄을 때
• Markdown 문서를 MDX로 바꾸기 전에 깨질 표기를 찾을 때
• 블로그 원고의 HTML 주석을 MDX 주석으로 바꿀 때
• 컴포넌트를 많이 쓴 문서의 태그 짝을 확인할 때

문제가 생겼을 때

활용 팁

• MDX 빌드 오류 메시지의 줄 번호와 이 검사기의 줄 번호를 함께 보면 원인을 더 빨리 찾을 수 있습니다.
• 문서에서 쓰는 컴포넌트와 props 목록은 MDX 컴포넌트·Props 추출기로 한 번에 정리할 수 있습니다.

자주 묻는 질문