How to add Syntax Highlighting to a Statamic Site

Published December 31st, 2019
2 minute read

Note: This applies to Statamic version 3+. In v2 the file locations will be in your theme.

We'll cover how to add syntax highlighting to code blocks in Statamic v3 using Prism. With a couple quick steps you'll have your code blocks looking spiffy!

My preferred client side highlighter is Prism because it's lightweight and easy to use.

First, we'll want to install prism with npm:

npm i prismjs

Next, in your resources/js/app.js file, add the following lines:

import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css' // see other themes in the prism docs
import 'prismjs/components/prism-markup-templating'
import 'prismjs/components/prism-php'
import 'prismjs/components/prism-bash'
import 'prismjs/components/prism-css'
import 'prismjs/components/prism-json'
import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-yaml'
Prism.highlightAll()

This imports Prism, a theme (prism-tomorrow), and the languages we want to use. If you use something like SASS or LESS, be sure to look at the available prism languages and include any others you need on the Prism docs.

Now you can run npm run dev and you should see your markdown code blocks with some nice formatting.

*If you don't, you probably just need to format your code blocks. For example,

```php

# or

```bash

You can also use CSS to style prism, for example if you wanted to add language types to the blocks (like I have at the top right). Here's my styles if you'd like them.

Enjoy this article? Follow me on Twitter for more tips, articles and links.
😢 Awww, nobody has liked or mentioned this on Twitter yet.

Join the Newsletter ❤️

A most excellent monthly newsletter with code & design tips, curated links and more!
Don't worry, I'll never send you spam. Unsubscribe at any time.