Page

A page is a Markdown or MDX file that Prestige compiles into HTML. It has two parts:

  • The content body, where you write the page itself
  • The frontmatter block, where you define page metadata

How to define a page

A page must live inside src/content. To be processed by Prestige, it also has to be referenced by a collection item.

For example, if you want an introduction page in the docs collection, place it in src/content/docs. The file can also live inside nested folders within that collection.

If you want src/content/docs/introduction.md to appear at /docs/introduction, you need to do two things:

  • Add the introduction.md file at the following path: src/content/docs/introduction.md
  • Add a matching collection item
prestige({
  collections: [
    {
      id: "docs",
      items: [
        {
          label: "Introduction",
          slug: "docs/introduction",
        },
      ],
    },
  ],
});

Format of a content page

Prestige compiles content pages into HTML using unifiedjs and MDX. The supported input formats are:

  • MD (regular markdown)
  • MDX (markdown with JSX)
  • GFM (GitHub Flavored Markdown)

In practice, this means:

  • Use .mdx when you need JSX support
  • Use .md for regular Markdown or GFM content

Frontmatter data

You can define frontmatter in YAML at the top of the file to control metadata such as the page title, description, and sidebar label:

---
title: Overview
---

# Overview

This is an overview.

In this example, the browser tab title will use Overview.

For full frontmatter options, check the Frontmatter Reference.

Table of contents

Prestige automatically generates a table of contents from the page headings.

Code highlighting

Prestige uses prismjs to highlight code blocks.

Add unifiedjs plugins

You can extend the content pipeline with custom remark and rehype plugins. Add them in the Prestige plugin's markdown config:

import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

prestige({
  markdown: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
  },
});