마크다운 플러그인에 GFM 적용하기

이 블로그에서는 gatsby-plugin-mdx 플러그인을 사용해 마크다운을 파싱 및 렌더링하고 있습니다. 이 플러그인에 remarkGfm을 적용하며 발생한 이슈입니다.

GFM이란?

GitHub Flavored Markdown의 줄임말로, 기본적인 마크다운 문법의 확장입니다. Github에서 처음 지원하기 시작했으며 다음과 같은 추가 기능을 제공합니다.

• 확장 문법: 다음과 같은 요소를 위한 문법이 추가되었습니다.
  • 테이블
  • 작업 목록 (Task list)
  • 취소선
• 자동 링크 삽입: URL이나 이메일 주소를 자동으로 <a> 태그로 감쌉니다.
• HTML 필터링: 마크다운에는 기본적으로 인라인 HTML 태그를 사용할 수 있지만, GFM에서는 <script>나 <iframe> 등, 몇 가지의 HTML태그가 보안상의 이유로 무시됩니다.

대부분이 Github나 다른 마크다운 에디터에서 당연하게 사용하고 있던 기능들이라, 이것들이 확장 문법이라는 사실을 이번에 처음 알았습니다. 저는 테이블 문법이 동작하지 않는 원인을 찾다가 알게 되었습니다.

remark-gfm 적용

gatsby-plugin-mdx 공식문서에 의하면, GFM을 적용하려면 gatsby-config에 remark-gfm을 추가해야 합니다. 저는 이 과정에서 두 가지 이슈를 겪었습니다.

모듈 시스템 문제

처음에 별 생각 없이 문서의 예시를 그대로 사용했는데 아래와 같은 에러가 발생했습니다. CommonJS에서 ESM의 구문(import문)을 사용했기 때문입니다.

SyntaxError: Cannot use import statement outside a module

반대로 import문을 require로 고쳐봤더니 또다시 에러가 발생했습니다. 알고 보니 remark-gfm은 ES 모듈이었고, 이를 require()로 불러오려고 해서 발생한 문제였습니다.

이를 해결하기 위해 공식 문서를 참고해 gatsby 파일들을 CommonJS에서 ESM으로 마이그레이션하는 작업을 진행했습니다.

패키지 버전 문제

모듈 시스템 문제를 해결하고 다시 실행해보니 이번에는 아래와 같은 에러가 발생했습니다.

ERROR #gatsby-plugin-mdx_10001 PLUGIN
...
TypeError: Cannot read properties of undefined (reading 'inTable')

remarkGfm이 작동하는 과정에서 라이브러리 내부적으로 뭔가 이슈가 발생한 것 같았습니다. 구글링을 했더니 이미 동일한 이슈가 올라와 있었습니다.

해당 이슈에서 제안한 대로 remark-gfm의 버전을 4.0.0에서 3.0.1(4.0.0 바로 아래 버전)로 낮춰서 해결했습니다.