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:
Next, in your resources/js/app.js file, add the following lines:
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,
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.