Syntax Highlighting

To support syntax highlighting libraries like Prism.js, colors and other styles can be added to theme.styles.pre to target child elements with class selectors. Prism.js adds <span> elements with class names that can be used as child selectors.

Install the Theme UI Prism component.

npm i @theme-ui/prism

Next, add the Prism component to your MDX components list. If you’re using Gatsby and gatsby-plugin-theme-ui, this file is src/gatsby-plugin-theme-ui/components.js.

import Prism from '@theme-ui/prism'

const components = {
  pre: ({ children }) => <>{children}</>,
  code: Prism,
}

export default components

In your theme, import and add a syntax theme from the Prism package.

import nightOwl from '@theme-ui/prism/presets/night-owl'

const theme = {
  styles: {
    pre: {
      ...nightOwl,
    },
  },
}

export default theme

You can also construct your own syntax theme inline, using theme colors:

{
  colors: {
    red: '#ec3750',
    green: '#33d6a6',
    blue: '#338eda',
    gray: '#666',
  },
  styles: {
    pre: {
      '.comment, .prolog, .doctype, .cdata, .punctuation, .operator, .entity, .url': {
        // theme.colors and other values can be referenced
        color: 'gray'
      },
      '.property, .tag, .boolean, .number, .constant, .symbol, .deleted, .function, .class-name, .regex, .important, .variable':
        {
          color: 'red'
        },
      '.atrule, .attr-value, .keyword': {
        color: 'blue'
      },
      '.selector, .attr-name, .string, .char, .builtin, .inserted': {
        color: 'green'
      }
    }
  }
}
}

For more details, check out the Prism package docs.