Skip to content
Theme UI
GitHub

Syntax Highlighting

Add syntax highlighting to code fences in MDX.

Install the Theme UI Prism component.

npm i @theme-ui/prism

If you're using Gatsby and gatsby-plugin-theme-ui, add the component to src/gatsby-plugin-theme-ui/components.js.

import Prism from '@theme-ui/prism'
const components = {
pre: (props) => props.children,
code: Prism,
}
export default components

Import and add a syntax theme from the Prism component to your theme object.

// src/gatsby-plugin-theme-ui/index.js
import nightOwl from '@theme-ui/prism/presets/night-owl'
export default {
styles: {
pre: {
...nightOwl,
},
},
}
Edit the page on GitHub
Previous:
Custom CacheProvider
Next:
Theme Color Meta Tag