Skip to content

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