How To Highlight Code Syntax With Crayons In WordPress?

There are many syntax highlighter plugins out there in WordPress plugin repository and WordPress also provides you a simple feature for highlighting code inside your posts and pages. All you have to do is switch from ‘Visual’ to ‘Text’ mode, select the syntax and click ‘code’ button. In this tutorial we will show you how to use a more beautiful option i.e. using crayons for highlighting syntax in WordPress.

Crayon Syntax Highlighter is a popular WordPress plugin which supports multiple languages, themes, fonts, highlighting from a URL, local file or post text. The plugin is built in PHP and jQuery, you can use it for highlighting from a URL, a local file or WordPress post text. It makes it easy for you to manage language files and define custom language elements with regular expressions. The plugin includes a group of other useful features listed on the plugin’s download page.

Screenshot showing Classic theme of Crayon Syntax Highlighter. There various other custom themes too.

[heading size=”17″]Step-1 Installation & Settings[/heading]

Install and activate Crayon Syntax Highlighter plugin then visit Dashboard -> Settings -> Crayon admin page and choose a syntax highlighter theme & choose your options.

[heading size=”17″]Step-2 Highlighting A Syntax[/heading]

For highlighting any syntax inside your post, click the ‘Add Crayon Code‘ icon added on your visual editor. If you are unable to click it then switch to ‘Text‘ mode and click ‘crayon‘ button instead. Select the language (Example: If you are writing a PHP syntax then select PHP as your language), paste your code and click ‘Add‘ button. That’s it, preview your post.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.