Skip to content
Theme UI

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'
const theme = {
styles: {
pre: {
export default theme
Edit the page on GitHub
Custom CacheProvider
Theme Color Meta Tag