Add Support for Syntax Highlighting in a Gatsby Site with @theme-ui/prism
[@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 @theme-ui/prism@0.4.0-alpha.3.
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:24] Inside your mdx file, use three backticks as code fences and set the language to JavaScript. Let example=egghead be the code snippet.
[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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!