Install and Configure Gatsby Blog Theme

Add Prism Highlighting to a Gatsby Blog Theme site

Blog Theme 2.0

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.

Course

Blog Theme 2.0

Add Prism Highlighting to a Gatsby Blog Theme site

Share this video with your friends