본문으로 건너뛰기

MDX 포매터

이 MDX 포매터로 MDX 문서를 깔끔하게 정리하세요. import, export, JSX 구성 요소, Markdown가 포함된 MDX를 붙여넣으면 도구가 문서 앞뒤의 빈 줄을 제거하고 모든 파이프 테이블의 정렬을 다시 맞춥니다. 셀을 열 너비에 맞춰 채우고 정렬 콜론을 포함해 구분 행을 다시 구성합니다. import, 구성 요소, 표현식은 작성한 그대로 유지되므로 문서 작성자는 빌드를 깨뜨리지 않고 깔끔한 표를 얻을 수 있습니다.

초기화

자주 묻는 질문

MDX 포매터는 무엇을 변경하나요?

파이프 테이블의 정렬을 다시 맞추고 문서의 앞뒤에서 빈 줄과 공백을 제거합니다. Markdown 텍스트, import, export, JSX를 포함한 나머지 모든 내용은 작성한 그대로 유지됩니다.

import, export 및 JSX 구성 요소를 변경하나요?

아니요. import와 export 문, <Callout type="info"> 같은 구성 요소 태그, 중괄호 안의 표현식은 변경 없이 복사됩니다. 포매터는 코드를 절대 재배치하지 않으므로 MDX 빌드를 깨뜨리지 않습니다.

표는 어떻게 형식화되나요?

각 행의 앞뒤에 파이프를 추가하고, 각 셀은 해당 열에서 가장 긴 셀의 너비에 맞춰 공백으로 채우며 최소 너비는 세 글자입니다. 구분 행은 같은 너비가 되도록 대시를 사용해 다시 구성됩니다.

표 정렬이 유지되나요?

예. :---, :---:, ---:와 같이 구분 행에 있는 정렬 콜론은 유지됩니다. 왼쪽, 가운데, 오른쪽 정렬 열은 형식화 후에도 동일하게 렌더링됩니다.

코드 블록도 변경되나요?

아니요. 백틱 세 개 또는 물결표 세 개로 된 펜스 사이의 내용은 그대로 유지됩니다. 코드 블록 안에서 파이프가 있는 줄도 표로 처리되지 않습니다.

일부 표 열의 너비가 예상보다 넓은 이유는 무엇인가요?

너비는 UTF-8 바이트 단위로 계산되므로 악센트가 있는 문자와 이모지는 한 글자보다 큰 값으로 계산됩니다. 추가 여백은 소스에만 표시되며, 렌더링된 표는 동일하게 보입니다.

JavaScript을(를) MDX 안에서도 서식 지정하나요?

아니요. 가져오기, 내보내기 및 표현식에 포함된 코드는 다시 서식 지정되지 않습니다. 더 큰 코드 블록은 JavaScript 또는 JSX Formatter로 따로 서식 지정하세요.

Markdown Formatter와 어떤 차이가 있나요?

두 도구 모두 같은 규칙을 적용하며, 이 도구는 결과를 mdx로 표시합니다. Docusaurus, Next.js, Astro 또는 유사한 문서 설정에서 .mdx 파일에 사용하세요.

결과가 mdx 코드 펜스로 감싸져 있는 이유는 무엇인가요?

출력은 mdx로 표시된 코드 블록 안에 반환되므로 Markdown에 붙여넣으면 소스로 표시됩니다. 바깥쪽 펜스 사이의 줄을 복사해 .mdx 파일에 붙여넣으세요.

문서는 얼마나 클 수 있나요?

실행당 최대 5 MB까지 지원하며, 더 큰 입력은 메시지와 함께 거부됩니다. 출력은 Code Formatter의 MDX 옵션과 동일합니다.

OneClick Pro 소개

OneClick Pro은 일상 업무에 활용할 수 있는 150개 이상의 웹 도구를 무료로 모아 제공합니다. 이미지와 단위를 변환하고, 코드를 포맷하고 검증하고, 도메인과 SEO를 확인하고, 텍스트와 날짜, 숫자를 다룰 수 있습니다. 모든 도구는 가입이나 구독 없이 사용할 수 있으며, 입력한 내용은 결과를 계산하는 데만 사용되고 저장되지 않습니다. 한 번 쓰는 작업을 위한 빠른 도구 모음으로 활용하거나, 매일 자주 쓰는 도구를 북마크해 두세요.