Syntax Highlighting in WordPress

2017 MacBook Pro 15 inch Close-Up photo

After I tried out a few of the available plugins for syntax highlighting, I ended up with a DIY solution that I’m really happy with. 

The main part of it is PrismJS which is an excellent JS/CSS solution for the job. 

I was trying to avoid anything that’s not out-of-the-box or requires custom shortcodes and PrismJS not only looks great, it also is very simple to use with the Classic Editor as well as the current version of Gutenberg.

Check out how simple it is to add a code block formatted with PrismJS:

Since it’s only a case of adding the classname to the block, it could not be simpler.

How do you make it work?

There are many ways to make it work within your site. The easiest is probably to use something like Simple Custom CSS and JS and add the scripts to the footer of your site. 

Leave a Reply