Markdown Extensions

Starlight includes Expressive Code for syntax highlighting, filenames, highlighted lines, diffs, and copy controls. This sample adds math processing with remark-math, rehype-katex, and KaTeX.

Syntax highlighting

profile.jsx

export function Profile({ user }) {
  const displayName = user.name ?? 'Anonymous'

  return (
    <article className="profile-card">
      <h2>{displayName}</h2>
      <p>{user.role}</p>
    </article>
  )
}

Diff

export const theme = {
  primary: 'blue',
  primary: 'purple',
  radius: '0.75rem',
}

Footnote and math

Footnotes keep supporting detail near the source.¹

Inline math such as $\sqrt{a^2+b^2}$ and display math render through KaTeX:

$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$

Footnotes

1. This is the rendered footnote definition. ↩