Have an issue with how code is displayed in a WordPress post? Then no need to worry because Crayon Syntax Highlighter, written by akarmenia, is for you. Crayon makes is extremely easy to insert code into your posts. Not only that, but the plugin boasts a large number of features and options to choose from. Let’s take a look at how to install the plugin, how to use it and some of the choices that it offers.
- Theme Editor
- Tag Editor
- Line numbers
- Copy/paste code
Step 1: Download, Install, Activate
You can download the plugin from the WordPress Plugin Directory here. Afterwards, you will need to upload the file using an FTP program, or you can install it via the Admin Dashboard. Afterwards, you will need to activate the plugin in order to use it on your site.
Step 2: Settings
To view the settings, you will need to click on the ‘Settings’ menu item that can be found on the left side of the page:
Click on ‘Crayon’
Let’s take a look at the options that we have available to us:
There are many themes available and you can set the default using the dropdown box titled ‘Theme’:
You can also change the default font:
You can choose from the following fonts:
The Metrics Panel allows you to change the styling of the container. You can change the margin or the size of the code box.
You can change the toolbar settings here:
What is the toolbar? The toolbar appears when you hover over a code block:
You can choose to hide the toolbar with the ‘Display the Toolbar’ dropdown box.
You can change line options here:
You can change the code settings here. For example, you can even minimize the code if you wish!
You can change the code tags and even enable shortcode-like tags:
You can change the default fallback language here.
Here’s an example of some of the languages available:
You can load local and relative files inot your website
You can view posts that have Crayon Code Blocks in them by clicking the ‘Show Crayon Posts’ button:
Tag Editor and Miscellaneous
You can cange the tag editor and other miscellaneous options here:
You can use the following debug options here:
Step 3: In your Post Editor
When editing your post, you can click the Crayon Syntax Highlighter button in your toolbar:
The following popup window will appear:
There are many options from the settings section shown earlier. Here’s an example of some of the options that I chose and some PHP code:
Finally, all you need to do is click on the Add button:
The code will now be inserted into your post:
Click on the Publish button and you will now see the code block:
You have now configured and used Crayon Syntax Highlighter.
If you have any questions, please leave a comment below. Good luck!