Post a Lot of Code? Try the Code Syntax Block Plugin for WordPress
I am always on the lookout for interesting syntax-highlighting plugins, particularly for those occasions when I write tutorials or other articles that lean heavily on code. Far too many plugins use shortcodes, custom blocks, or other odd solutions. However, there is one option that I intentionally overlooked when it was released over a year ago: Code Syntax Block by Marcus Kazmierczak.
Based on the name, I assumed it was yet another standalone block. However, I have since given it another look and realized that this was note the case. It integrates directly with the core WordPress block. There are times when a new block is necessary, but this is not one of those times. Sometimes it is better to extend the existing blocks in core.
Code Syntax Block uses the Prism JavaScript library to add syntax highlighting on the front end of the site. The plugin is designed well. It loads its scripts and styles only when the code block is in use.

The plugin does not load Prism in the editor, so the code output will use the default editor or theme styling. This may not appeal to those who want a one-to-one match between the back and front end. I am comfortable with the non-highlighted version in the admin while having the pretty output on the front end. However, it would be nice to see an option or filter to enable highlighting in the editor.
Out of the box, the plugin uses the One Dark theme, which was created for the Atom editor and ported to Prism. Developers can overwrite the theme with either a custom assets/prism/prism.css
file in their theme or by filtering the path or URL that gets loaded. The Prism project has a variety of themes available that are plug-and-play. Other themes exist outside of the official list too.
On the admin side, the plugin creates a new “Settings” tab for the code block and adds a few options that users can choose from:
- Language
- Show line numbers
- Title for code block

By default, the plugin does not support the full list of over 200 languages. Instead, it lists just over 40 of the most popular. The list is filterable, so anyone can add or remove languages with a few lines of code. There is also a filter hook for setting the default languages, which would be particularly useful for those who routinely post code snippets in the same coding language.
After a few days of testing, I can safely say that Code Syntax Block is being added to my WordPress toolbox. I wish I had only given it a shot much sooner.
8 Comments
Definitely a solid plugin. I’ve been using this for a while on my blog and have also put it to extensive use at snippet.farm – should anyone want to see it in use.
Report
Also, a shameless plug(-in) for my fork of this plugin which does the syntax highlighting server-side in PHP: Syntax-highlighting Code Block (with Server-side Rendering). This improves performance by not loading frontend JS and it eliminates any flash of unstyled code.
Report
Nice! Thanks for sharing, Weston.
On that note, I wish that WordPress.org would show related plugins so it’d be easier to find other solutions.
Report
I like this idea! Thanks for sharing!
Report
Nice one! I was about to comment with this idea—seems like removing the need to enqueue extra JavaScript would make this even more useful and powerful.
Have you considered adding a preview function to the editor?
Report
Yes, I did file an issue for previewing in the editor: https://github.com/westonruter/syntax-highlighting-code-block/issues/8
Report
It’s a nice plugin. I am using it at GutenbergHub as well. 😇
Report
Looks great! I’ve been using for a while another one based on Prism.js, Prismatic, by Jeff Starr. You can also choose to use Highlight.js but Prism.js is definitely superior since it tokenizes the code better and offers more classes to stylize it. Support for languages is great and you can see in this post on my site
https://startfunction.com/rust-webassembly-deno/
that it stylized not only the Rust and JavaScript languages, but also the TOML declaration syntax (like package.json but for Rust).
Report
Comments are closed.