Skip to content
Theme UI
GitHub

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.

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.

src/gatsby-plugin-theme-ui/index.js
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.

Edit the page on GitHub
Previous:
Layout Components
Next:
Linked Headings