unified,remark 로 markdown 변환하기

unified logo

markdown 을 html로 변환한다면 아마 90%는 unified,remark,rehype 를 사용할것이다.
이 블로그에도 unified 를 사용했는데 한글로된 문서가 별로 없고 설명도 많이 부족해서 한번 정리하기로 했다.

tl;dr

설명 듣고싶지 않고 구현만 바로 하고 싶다면 이 글을 읽어보자.

들어가기전에

AST(추상 구문 트리) 라는 용어를 알아보자 아래의 글을 좀더 쉽게 읽을수있다.
이 포스트에서 말하는 ast(abstract syntax trees) 란 markdown이나 html 이 json 형태로 변환된 트리구조를 말한다.
markdown을 파싱하면 mdast 라는 트리가 만들어지고 html을 파싱하면 hast 라는 트리가 만들어진다.

unified,remark 그리고 rehype

사실 이거 3개가 전부 세트다. unified 의 개념은 ast 로 작업하는 500개 이상의 오픈소스 패키지의 모음 이면서 unified 패키지는 플러그인 형태로 ast 를 처리하는 프로젝트에서 사용할수있는 코어 패키지 라고 설명하고있다.
그니까 쉽게 말하자면 ast 데이터를 처리해야할때 unified 라는 본체에 원하는 플러그인을 끼워넣어서 사용한다 라고 설명할수있다.
그리고 remark(markdown) 와 rehype(html) 가 unified 의 플러그인중 한 종류이다.
markdown을 지금 보고있는 글과 같이 html로 변환해야 하기때문에 unified와 remark,rehype 3개를 같이 쓰는거다.

unified 사용해보기

unified로 markdown을 html로 변환시켜보자. 먼저 필요한 패키지를 설치하는데 필요한게 꽤 많다.

npm i unified remark-parse remark-rehype rehype-stringify

아래와 같이 코드를 작성한다.

import { unified } from "unified";
import parse from 'remark-parse'
import stringify from 'rehype-stringify'
import toRehype from 'remark-rehype'

const markdown=`
## unified 사용해보기

unified로 markdown을 html로 변환시켜보자. 먼저 필요한 패키지를 설치하는데 필요한게 꽤 많다.  
\`\`\`
npm i unified remark-parse remark-rehype rehype-stringify
\`\`\`
`

unified().use(parse).use(toRehype).use(stringify).process(markdown,(err,res)=>{
    console.log(res)
})

하나하나 이 코드가 어떻게 동작하는지 살펴보자.
가장 먼저 코어모듈인 unified에 use() 메소드로 플러그인을 적용하고있다.
remark-parse 를 통해 markdown 텍스트를 mdast 로 변환한 다음 remark-rehype 플러그인으로 mdast를 hast로 변환한다.
그리고 rehype-stringify 가 hast를 실제 html 문자열로 변환한다.
마지막에 쓰인 process() 메소드는 앞에서 장착한 플러그인들을 실행시켜 실제 결과를 만들어낸다.

실행 결과를 보자.

VFile {
  data: {},
  messages: [],
  history: [],
  cwd: 'C:\\Users\\프로젝트 경로',
  value: '<h2>unified 사용해보기</h2>\n' +
    '<p>unified로 markdown을 html로 변환시켜보자. 먼저 필요한 패키지를 설치하는데 필요한게 꽤 많다.</p>\n' +
    '<pre><code>npm i unified remark-parse remark-rehype rehype-stringify\n' + 
    '</code></pre>'
}

markdown이 실제 html로 변환된 모습이다.

플러그인 적용

remark 와 rehype 에 적용할수있는 수많은 플러그인들이 있다. 여러모로 편리한것들이 많이 있다.
기억하자, remark는 markdown 과 관련된 작업을, rehype는 html과 관련된 작업을 처리한다.

대표적으로 사용되는 유명 플러그인 몇가지를 소개 한다.

remark-gfm
github 에서 사용하는 각주¹, ~~취소선~~, 테이블 등 기본 markdown 문법이 아닌것들을 지원하는 플러그인이다.
이름 그대로 깃허브맛 마크다운(GitHub Flavored Markdown)이다.
rehype-raw
markdown에 포함된 html 코드도 지원하는 플러그인이다. 주로 markdown 만으로는 표현할수 없는 내용들을 html 코드로 표현할때 사용할수있다. 이런거 처럼
rehype-slug
헤딩에 (h1~h6) id를 추가해준다. 긴 문서에서 table of content 에서 특정 섹션으로 바로 내려가는 링크를 만들때 유용하다.

이런걸 말한다. 영어로는 footnote 라고 한다. ↩