Plugin Spotlight: Crayon Syntax Highlighter

Syntax Highlighter is a great plugin.

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.

Features

  • Theme Editor
  • Tag Editor
  • Line numbers
  • Copy/paste code

Step 1: Download, Install, Activate

The Crayon Syntax Highlighter plugin

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:

The Crayon settings menu

Click on ‘Crayon’

The settings page for Crayon Syntax Highlighter

Let’s take a look at the options that we have available to us:

Theme

There are many themes available and you can set the default using the dropdown box titled ‘Theme’:

crayontheme
 For example, you can change it to the familiar Sublime Text theme:

The Sublime Text theme for Crayon

Font

You can also change the default font:

You can choose the default font here

You can choose from the following fonts:

The fonts that you can use with Crayon Syntax Highlighter

Metrics

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 metrics

Toolbar

You can change the toolbar settings here:

You can use

What is the toolbar? The toolbar appears when you hover over a code block:

The toolbar used for Crayon code blocks

You can choose to hide the toolbar with the ‘Display the Toolbar’ dropdown box.

Lines

You can change line options here:

The code options can be changed here

Code

You can change the code settings here. For example, you can even minimize the code if you wish!

You can change the code settings here

Tags

You can change the code tags and even enable shortcode-like tags:

You can change the tags here

Languages

You can change the default fallback language here.

You can change the language settings

Here’s an example of some of the languages available:

The long list of default languages

Files

You can load local and relative files inot your website

files2

Posts

You can view posts that have Crayon Code Blocks in them by clicking the ‘Show Crayon Posts’ button:

You can view the posts that used Crayon

Tag Editor and Miscellaneous

You can cange the tag editor and other miscellaneous options here:

The tag editor and miscellaneous options

Debug

You can use the following debug options here:

You can change the debug options as well

Step 3: In your Post Editor

When editing your post, you can click the Crayon Syntax Highlighter button in your toolbar:

You can add or change a code block by clicking the box

The following popup window will appear:

The code block settings

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:

An example of some of the options

Finally, all you need to do is click on the Add button:

Click on the Add button to paste the code into the editor

The code will now be inserted into your post:

The code will now be inserted into your post

Click on the Publish button and you will now see the code block:

You will now see a code block in your post

You have now configured and used Crayon Syntax Highlighter.

If you have any questions, please leave a comment below. Good luck!

OUR SERVICE

Fan Commerce

ファンコマース

ファンとのダイレクトなコミュニケーションを実現して「感動体験」をビジネスに結びつけます。

Digital Marketing

デジタルマーケティング

未来を創造する価値ある「顧客体験」を実現する仕組みづくりを提案。