Any .mdx file in the routes directory is treated as an MDX page in your app.

# Intro This is an intro page written using markdown.

The markdown is parsed and converted to jsx automatically.

Custom Components

By default, MDX uses default elements such as <h1> and <p> but you can provide your own custom components using our MDXProvider in a parent layout.

import { MDXProvider } from 'firebolt' export default function DocsLayout({ children }) { return ( <MDXProvider components={components}> <nav>{/* docs nav */}</nav> {children} </MDXProvider> ) } const components = { h1(props) { return <h1 {...props} css='color:blue' /> }, }

This can be useful to apply syntax highlighting to code blocks or wrapping <a> tags with <Link>.

MDX Plugins

You can enhance MDX with any Remark/Rehype plugins in your firebolt.config.js.

import remarkGFM from 'remark-gfm' import rehypeShiki from '@shikijs/rehype' export const config = { mdx: { remarkPlugins: [remarkGFM], rehypePlugins: [rehypeShiki], }, }