Safe markdown rendering (remark + rehype)

11806 views

                  import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';

export async function renderMarkdown(md: string) {
  const file = await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkRehype, { allowDangerousHtml: false })
    .use(rehypeStringify)
    .process(md);

  return String(file);
}

Markdown is the sweet spot for user-generated content: expressive enough, but not a full HTML editor. The danger is letting raw HTML slip through. I use remark to parse markdown, then rehype to render HTML, and I disable raw HTML unless I have a sanitization story. I also keep syntax highlighting deterministic (no remote calls) so rendering stays fast and safe. One more practical detail: normalize links—add rel="noopener noreferrer" for target=_blank, and consider a link policy for external URLs. When the rendering pipeline is explicit and composable, it’s easy to evolve formatting over time without breaking old posts, and security decisions stay centralized instead of scattered across components.

Mateo Rodriguez

More from Mateo Rodriguez

Safe markdown rendering (remark + rehype)

0 Comments

More from Mateo Rodriguez