Add Prism Highlighting to a Gatsby Blog Theme site

Laurie Barth
InstructorLaurie Barth

Share this video with your friends

Send Tweet
Published a year ago
Updated 10 months ago

Use the built-in prismPreset option to add prism highlighting to gatsby-theme-blog.

Note that this is only available in Blog Theme 2.0 and beyond.

Laurie Barth: [0:01] To set up code snippets in your site, first add one. In this case, it uses the JavaScript language, and we're going to add a code snippet that sets a new constant called variable with some string value.

[0:19] Go to your gatsby-config file and edit your setup for your gatsby-theme-blog plugin. Add the option prismPreset and set whichever theme UI preset you'd like to use for prism, in this case prism-okaidia.

[0:38] Run gatsby develop and navigate to your blog post. Once there, you can see your code snippet with prism highlighting.