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());

このアプローチにより、ユーザー生成コンテンツを処理したり、独自の静的サイトジェネレーターを作成したりする際に、最大限の柔軟性とセキュリティが得られます！