마크다운 테이블 적용 안될 때 - remarkGfm 적용하기

mdx 파일을 렌더링하는 블로그 특성에 맞춰, 게시물들은 모두 마크다운 문법으로 작성하고 있다. 그런데 마크다운 문법 중 테이블을 작성했을 때 표 형태로 렌더링되지 않고 그대로 텍스트로 노출되는 문제가 발생했다.

원인 : remark-gfm 플러그인이 빠져 있어서 !!

.mdx는 기본적으로 Markdown을 해석하지만, GFM(GitHub Flavored Markdown)에서 제공하는 기능들은 별도 플러그인을 추가해줘야 한다.

remarkGfm ?

remark-gfm은 GFM(GitHub Flavored Markdown) 문법을 지원하는 플러그인으로, 일반 마크다운보다 확장된 문법을 사용할 수 있게 해준다. 마크다운의 표, 체크리스트, 링크, 취소선 등등이 가능하게 한다.

설치

yarn add remark-gfm

적용

(Next.js + next-mdx-remote 기준)
MDX 파일을 serialize할 때, 옵션에 remarkPlugins를 추가해준다

import remarkGfm from 'remark-gfm';
 
const mdxContent = await serialize(content, {
  mdxOptions: {
    remarkPlugins: [remarkGfm], // 이 부분 추가 !!
    rehypePlugins: [
      [rehypeExtractHeadings, headings],
      [rehypePrettyCode, prettyCodeOptions],
    ],
  },
});

결과

잘 보인다 ^_^

기능

remark-gfm이 제공하는 기능은 아래와 같다.

Autolink literals (자동 링크 변환)

→ 클릭 가능한 링크로 자동 변환된다.

www.example.com, https://example.com, and contact@example.com.

Footnote (각주)

A note¹

Strikethrough (취소선)

one or two tildes.

Table (테이블)

Tasklist (체크리스트)

• to do
• done