Markdown과 unified.js의 마법

Markdown은 기술 문서 및 블로그 작성을 위한 표준 형식입니다. 하지만 이를 HTML로 어떻게 변환할까요?

최신 접근 방식은 추상 구문 트리(AST)를 통해 콘텐츠를 처리하는 unified 생태계를 사용하는 것입니다.

Unified 파이프라인

일반적인 파이프라인은 다음과 같습니다.

구문 분석 (Parse): 문자열을 AST로 변환합니다(remark-parse 사용).
변환 (Transform): AST를 수정합니다(예: remark-rehype 및 rehype-highlight를 사용하여 구문 강조 표시 추가).
문자열화 (Stringify): AST를 다시 HTML 문자열로 변환합니다(rehype-stringify 사용).

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeHighlight from 'rehype-highlight';
import rehypeStringify from 'rehype-stringify';

const processor = unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeHighlight)
  .use(rehypeStringify);

const html = await processor.process('# Hello World');
console.log(html.toString());

이 접근 방식은 사용자 생성 콘텐츠를 처리하거나 자체 정적 사이트 생성기를 작성할 때 최고의 유연성과 보안을 제공합니다!