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.mdfile 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
.mdxwhen you need JSX support - Use
.mdfor 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],
},
});
