[@theme-ui/prism](https://theme-ui.com/packages/prism/#syntax-themes) is a syntax highlighting component that works with Theme UI. In this lesson, use
@theme-ui/prism to select a color scheme for rendering code snippets in MDX files.
Make sure to install
Instructor: [0:05] Install @theme-ui/prism using the specific .4.-alpha.3 version. In your gatsby-config file, update your gatsby-plugin-theme-ui with prismPreset. We'll use prism-okaidia, but others are available.
[0:26] In your src folder, create a new directory called gatsby-plugin-theme-ui. Inside of it, create a components.js file. Use the @jsx pragma and import Prism from '@theme-ui/prism'.
[0:58] Export a default object. Using the pre key, pass a function that takes props and returns props.children, and for code, pass the Prism component. This will operate on the children props before everything is rendered.
[1:38] Rerun your project. You'll see the updated code highlighting in syntax. You can also add additional lines of code and use the comment //highlight-line to include built-in code highlighting for a given line.