page.mdx

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

routes/docs/intro.mdx
# 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.

routes/docs/_layout.js
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.

firebolt.config.js
import remarkGFM from 'remark-gfm'
import rehypeShiki from '@shikijs/rehype'

export const config = {
  mdx: {
    remarkPlugins: [remarkGFM],
    rehypePlugins: [rehypeShiki],
  },
}