https://bepyan.github.io/blog/nextjs-blog/3-mdx-plugin#remark-math-rehype-katex

참고 블로그

markdown을 html로 변환할때 사용하는 라이브러리들이다.

unified , remark , rehype

그리고 contentlayer 에서는 위 플러그인을 손쉽게 연결할수 있도록 도와준다.

<aside> ❗ 중요!! 마크다운 컴포넌트 상위에 prose 를 꼭 씌워줘야하는 것을 잊지 말자.. 이유는 mdx에 대한 편리한 스타일 때문이다. (공식 Tailwind CSS 타이포그래피 플러그인은 바닐라에 아름다운 타이포그래피 기본값을 추가하는 데 사용할 수 있는 산문 클래스 세트를 제공한다)

@tailwindcss/typography 를 적용한후 mdx파일이 파싱된걸 확인을 해보면 mdx가 스타일이 적용되어서 나오는걸 확인할 수 있을 것이다.

</aside>

<div className="prose dark:prose-dark">
	<MDXContent/>
</div>

remark-gfm

GFM(autolink literals, footnotes, strikethrough, tables, tasklists…)

**https://github.com/remarkjs/remark-gfm**

GFM(autolink literals, footnotes, strikethrough, tables, tasklists...) 문법들을 해석해주는 도구 입니다.

굉장히 기본적인 마크다운 문법을 HTML로 변환해주기에 필수로 사용해야 합니다.