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: {
      ...nightOwl,
    },
  },
}

export default theme