Rendering Reference

This post exists to exercise every part of the markdown pipeline in one place, so rendering regressions are obvious after a dependency upgrade. If something here looks wrong, the plugin responsible is named in the heading above it.

Code blocks — rehype-prism-plus

A plain block with no language, falling back to the configured defaultLanguage:

git rebase origin/main

TypeScript, the most common case on this site:

type Post = {
  slug: string
  title: string
  tags: string[]
  draft?: boolean
}

export function publishedPosts(posts: Post[]): Post[] {
  return posts.filter((post) => post.draft !== true)
}

Code titles — remark-code-titles

The title bar is a separate element (.remark-code-title) styled to sit flush on top of the block. If the two ever drift apart, the radius or margin rules are the cause:

const publishPosts = allBlogs.filter((post) => post.draft !== true)

Line highlighting

Lines 2 and 4-5 should be marked:

const config = {
  darkMode: 'class',
  content: ['./app/**/*.tsx'],
  theme: {
    extend: {},
  },
}

Line numbers

def slugify(value: str) -> str:
    return value.lower().replace(" ", "-")


print(slugify("Rendering Reference"))

Other languages

rm -rf .contentlayer .next && npm run build

.remark-code-title {
  @apply rounded-t-sm bg-gray-700 px-5 py-3 font-mono text-sm font-bold;
}

{
  "engines": { "node": "24.x" }
}

Inline code such as npm dedupe unified should sit on the surrounding line without changing its height.

Math — remark-math + rehype-katex

Inline math: the golden ratio $\varphi = \frac{1 + \sqrt{5}}{2}$ sits mid-sentence.

Display math gets its own block and scrolls horizontally if it overflows:

Tables — remark-gfm

Lists and task lists

1. Ordered item
2. Another, with a nested list
   • nested bullet
   • another one

• Completed task
• Incomplete task

Quotes, emphasis, links

A blockquote, which should carry the prose border and spacing.

Spanning two paragraphs.

Bold, italic, struck through, and a link that should pick up the primary colour on hover.

Footnotes

Footnotes render at the bottom with a back-reference arrow¹, and the .footnotes rule adds the divider above them².

Citations — rehype-citation

Citations resolve against data/references-data.bib (Nash, 1950), and multiple keys render together (Nash, 1951; Xie, 2016). The bibliography below is generated by the plugin, and each entry uses the .csl-entry spacing rule.

References