Outstatic and Remark/Rehype

The only thing that didn't work out of the box after using Outstatic for a while was rendering the markdown tables that the Tiptap editor produces. Turns out tables aren't part of the markdown core spec — they come from GitHub-flavoured markdown. Outstatic renders markdown with remark, and remark-gfm adds tables, task lists, strikethroughs and the rest of the GFM extras.

Rendering is done in the website project rather than inside the Outstatic package itself, so it's a one-line change in the markdownToHtml helper that's used by every content type:

import { remark } from "remark";
import html from "remark-html";
import remarkGfm from "remark-gfm";
 
export default async function markdownToHtml(markdown: string) {
  const result = await remark().use(remarkGfm).use(html).process(markdown);
  return result.toString();
}

Code highlighting

Once I started adding code snippets to posts I noticed they came out as plain, unhighlighted text, which looks quite sad. There isn't really a drop-in remark plugin for this — the common approach is to hand off to rehype and use rehype-pretty-code. The only gotcha is that you need the html function from rehype, not remark, otherwise nothing comes out:

import { remark } from "remark";
import remarkGfm from "remark-gfm";
import remarkRehype from "remark-rehype";
import rehypePrettyCode from "rehype-pretty-code";
import html from "rehype-stringify";
 
export default async function markdownToHtml(markdown: string) {
  const result = await remark()
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypePrettyCode, {
      theme: "nord",
      keepBackground: true,
    })
    .use(html)
    .process(markdown);
  return result.toString();
}

And that's it — code blocks now have syntax highlighting.