A syntax highlighting component based on prism-react-rendererthat works seamlessly with Theme UI.


npm i @theme-ui/prism


The syntax highlighting component needs to be passed to Theme UI context via the ThemeProvider.

// src/components/layout.js
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import Prism from '@theme-ui/prism'

import theme from './theme'

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

export default ({ children }) => (

Then, all code blocks in MDX documents wrapped by Layout will be syntax highlighted.

Gatsby Plugin

When using gatsby-plugin-theme-ui, shadow the src/gatsby-plugin-theme-ui/components.jsmodule to add the Prism component to MDX scope.

// src/gatsby-plugin-theme-ui/components.js
import Prism from '@theme-ui/prism'

export default {
  pre: props => props.children,
  code: Prism,

Syntax Themes

This package includes the default syntax color themes from the prismjsand prism-react-rendererpackages. To add these to your Theme UI themeobject, import a preset and add the styles to theme.styles.code.

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

export default {
  // ...theme
  styles: {
    code: {

The following themes are available and can be found in the presets/directory.

  • dracula.json
  • duotone-dark.json
  • duotone-light.json
  • github.json
  • night-owl-light.json
  • night-owl.json
  • oceanic-next.json
  • prism-coy.json
  • prism-dark.json
  • prism-funky.json
  • prism-okaidia.json
  • prism-solarizedlight.json
  • prism-tomorrow.json
  • prism-twilight.json
  • prism.json
  • shades-of-purple.json
  • ultramin.json
  • vs-dark.json

Theme UI Colors

To theme the prism styles based on the colors defined in your theme.colorsobject, use the theme-uipreset, which will use the following color keys for syntax highlight.

  • gray
  • primary
  • secondary
  • accent
// src/gatsby-plugin-theme-ui/index.js
import prism from '@theme-ui/prism/presets/theme-ui'

export default {
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
    secondary: '#119',
    accent: '#639',
    gray: '#666',
  styles: {
    code: {

Additional Languages

Please note that @theme-ui/prismuses prism-react-renderer, which does not include all languages supported in Prismby default. So, if you happen to use one of the missing languages, your code block simply won't show up as highlighted.

For example, to add support for the Rlanguage, import the language and pass a custom Prisminstance to the Theme UI component:

// src/gatsby-plugin-theme-ui/components.js
import React from 'react'
import ThemeUIPrism from '@theme-ui/prism'
import PrismCore from 'prismjs/components/prism-core'
import 'prismjs/components/prism-r'

export default {
  pre: props => props.children,
  code: props => <ThemeUIPrism {...props} Prism={PrismCore} />,

See the Theme UI docsfor more.






扫码加入 JavaScript 社区