In our previous tutorial, I have explained how you can use Github Gist for highlighting syntax in WordPress. But if you are looking for an alternative way to highlight syntax in your WordPress blog or website this tutorial will help you. Here I have provided a step by step guide to use Crayon Syntax Highlighter for syntax highlighting.
What Is Crayon Syntax Highlighter
Crayon Syntax Highlighter is one of the best WordPress plugins for highlighting syntax in WordPress. Built in jQuery and PHP, this plugin supports customizable themes and languages. It can highlight syntax from a WordPress post, a URL or a local file. Also it lets you manage Language files along with defining custom language elements using regular expressions.
One of the best features of this WordPress plugin is that it avoid conflicts with other plugins on WordPress by using pre-filter and post-filter. Using this feature, the plugin first pulls out the code snippets in your language files and pushes them out in the end along with highlighting them.
How To Use Crayon Syntax Highlighter
1) To get started, log into your WordPress dashboard. Once done, go to “Plugins -> Add New” and search for Crayon Syntax Highlighter.
2) Once installed, click on “Activate” as shown in the screenshot below.
3) Once activated, go to the Plugin settings page by following this path: “Settings -> Crayon“.
4) Now select the checkbox next to “Enqueue themes in the header” and “Enqueue fonts in the header” as shown in the screenshot below. Also, you can change the themes and fonts as per your wish. (Note: Here I have left them as default).
5) Next, in the “Misc” settings, select the checkbox next to “Remove Crayons from excerpts“, “Disable animations” and “Disable runtime stats“. Also, uncheck the box next to “Allow Crayons inside comments“. Once done, click on “Save Changes“. (Note: By doing this changes, you can speed up the plugin).
That’s it. Now you have successfully finished installing and configuring Crayon Syntax Highlighter plugin for WordPress. To use this plugin for highlighting syntax, go to WordPress post and click on “Crayon” tag.
A pop-up page will open up with the title “Ad Code“. Add your code in the “Code” section, add a “Title“, select your language (you can leave it as “Default” as well) and click on “Add“.
That’s it. Now crayon syntax highlighter plugin will do its magic and you will be able to see the added code in WordPress as shown in the screenshot below.
If you encounter any issues while installing or using this WordPress plugin, do let me know by dropping a comment below.