Markdown 한 줄이 화면이 되기까지

Markdown 문자열 \
→ remarkParse (Markdown → mdast 구문 트리) \
→ remarkGfm (표, 체크박스, 자동 링크) \
→ remarkRehype (mdast → hast, HTML 트리로 변환) \
→ rehypeRaw (글 속 raw HTML 흡수) \
→ rehypeImageFigure(이미지+캡션 →
 
) ← 커스텀 플러그인 \
→ rehypeSlug (헤딩에 id 부여) \
→ rehypeAutolinkHeadings (헤딩을 앵커 링크로 감싸기) \
→ rehypePrettyCode (Shiki로 코드 색칠) \
→ rehypeStringify (hast → HTML 문자열) \
HTML 문자열
 

// src/lib/markdown.ts \
const processor = unified() \
.use(remarkParse) \
.use(remarkGfm) \
.use(remarkRehype, { allowDangerousHtml: true }) \
.use(rehypeRaw) \
.use(rehypeImageFigure) \
.use(rehypeSlug) \
.use(rehypeAutolinkHeadings, { behavior: "wrap" }) \
.use(rehypePrettyCode, { theme: "github-dark", keepBackground: false }) \
.use(rehypeStringify);
 

// 글 속 raw HTML을 보존 — 정화 단계는 일부러 생략 \
.use(remarkRehype, { allowDangerousHtml: true }) \
.use(rehypeRaw)
 

// src/lib/markdown.ts (발췌) — hast 트리를 순회하며 변환 \
const rehypeImageFigure: Plugin = () => (tree) => { \
const toFigure = (node) => { \
if (node.tagName !== "p" || !node.children) return null;
 
// 공백을 뺀 "의미 있는" 자식이 이미지 하나뿐인 문단만 대상으로 \
const meaningful = node.children.filter( \
(c) => !(c.type === "text" && !(c.value ?? "").trim()), \
); \
if (meaningful.length !== 1) return null;
 
const img = meaningful[0]; \
if (img.tagName !== "img") return null;
 
const alt = typeof [img.properties?.alt](https://img.properties?.alt) === "string" ? img.properties.alt.trim() : ""; \
if (!alt) return null; // 캡션(alt)이 없으면 그대로 둔다
 
return { \
type: "element", \
tagName: "figure", \
children: [ \
img, \
{ type: "element", tagName: "figcaption", children: [{ type: "text", value: alt }] }, \
], \
}; \
}; \
// ...트리를 재귀적으로 순회하며 해당 문단을 figure로 교체 \
};
 

.use(rehypePrettyCode, { theme: "github-dark", keepBackground: false })
 

// src/lib/markdown.ts \
export async function renderPost(markdown: string): Promise { \
const html = await renderMarkdown(markdown); \
return { \
html, \
toc: tocFromHtml(html), // 렌더된 HTML에서 목차 추출 \
readingTimeMinutes: estimateReadingTime(markdown), \
}; \
}
 

function tocFromHtml(html: string): TocItem[] { \
const items: TocItem[] = []; \
const re = /<h([23]) id="([^"]+)"[^>]*>([\s\S]*?)<\/h\1>/g; \
let m; \
while ((m = re.exec(html)) !== null) { \
items.push({ depth: Number(m[1]), id: m[2], text: m[3].replace(/<[^>]+>/g, "").trim() }); \
} \
return items; \
}
 

// 공백을 뺀 글자 수 ÷ 분당 약 500자 \
export function estimateReadingTime(markdown: string): number { \
const chars = markdown.replace(/\s/g, "").length; \
return Math.max(1, Math.round(chars / 500)); \
}