How To Use Crayon Syntax Highlighter Plugin

Crayon Syntax Highlighter Plugin

Do you visit blogs online and see people posting code inside their blog post for you to copy and use? Want to know how to post code in a safe way on your blog? Perhaps you are learning how to develop themes and one day may want to share your codes for free online or share a code you found online on with visitors of your blog. The best plugin to post codes on any WordPress blog is the Crayon Syntax Highlighter plugin.

This plugin is a bit confusing if you look at the plugins settings page. In this post, I’ll make it easy for you to follow along. See examples of this plugin in action in this tutorial: 5 Simple Codes To Customize Your Theme After Installation

How To Install The Crayon Syntax Highlighter

Go to your plugins page and click on Add New, then type in the following text into the search box like shown below: (Crayon Syntax Highlighter)

Hit the enter key to begin the search for the plugin in the WordPress code index. You will then see this plugin in the first box on the left-hand side.

crayon syntax

NOTE: This plugin works with the latest WordPress version which currently is 4.7.3 and even on the latest Genesis Framework version 2.4.2 as of March 9, 2017.

Since I already have this plugin installed, the install button is grayed out. You can now safely install the plugin and then open up a new blog post to post a sample code and see how easy it is.

How To Use The Plugin

This plugin works with many programming languages such as CSS, HTML, PHP and much more. It’s built just for WordPress. There are 2 ways you can enable this feature inside your blog post/page when you want to drop some code. do know that you have a “text” and “visual” mode when you want to write content right? Here is how to use both

Did you know that you have a “text” and “visual” mode when you want to write content right? Here is how to use both versions to post code.

Text Mode

Start off with a blank canvas.

Crayon Syntax Highlighter Text Example

I do hope the image is large enough for you to see what I am doing as a step by step guide this post will be. In the image above, can you see where the “Crayon” text button is? To post a code in a blog post or a page, you would click on the “crayon” button then the following box appears as shown below.

Syntax Highlighter Text Code

Yes, there are a lot of stuff/features inside that popup but I have never used any of them in my couple of years using this plugin. I just click on the “Crayon” link and paste my code. Look at the screenshot below with the code added.

Crayon Syntax Final Text Code

After the code is added, all you have to do now is hit the Add Button to add the code into the blog post. Keep in mind that you can then copy the whole code inside the blog post to paste it in the location you want it to be in.

Hit The Add Button

You see the **pre** tags at the beginning and end of the code? Don’t touch these because that’s the actual code that makes your code look like the sample image. Don’t ever type the **pre** codes manually, always use the “Crayon” button so you are adding code the correct way.

Crayon Syntax Final Text Code

Visual Editor

The 2nd way to post code with this plugin is using the visual editor editing window if you prefer to write from that page. It’s relatively the same way as before with a slight twist.

Let’s get started, I will use the same blog post as this example. Click the visual button. I highlighted the button in the below image.

Syntax Visual Editor

Let’s begin to add another code. Can’t find the “Crayon” button? It’s now an icon. Check out the image below.

Crayn Syntex Visual Code Add

Now that you have clicked on that image, you’ll notice the same popup box link in the “Text Editor” page. Like before, just copy your code into the blank box and click on “add”

Crayon Syntax Final Text Code

Once you have clicked on the “Add” button, you’ll see the code inside the blog post/page like so.

Crayon visual Text Code Complete

You see how nice the code is displayed? Using the visual editor is a safe way to use this plugin when posting codes in your blog post. You have fewer chances to accidentally delete the **pre** code tags you see in the “Text Editor.” Remember, if you mess up your code when you publish it, your visitors will have issues with their blogs. My suggestion would be to use the “visual editor” version when you want to post codes.

That’s it, that’s how simple it is to post the code with the Crayon Syntax Highlighter. Simple right? I did not show you what to change in the plugin settings page or what to select in the plugin popup box before you drop your code in because it doesn’t matter. The way I showed you works. Go to my example page I linked earlier in this tutorial and copy the code.

If you have found this tutorial helpful in any way, please consider sharing it online with your followers.

Show 2 Comments


  • avatar image
    Rakesh Kumar
    December 21, 2016 Reply

    i was bit confused that how to use cryon syntax highlighter plugin because of there too muchh options, but after read this post i totally understand how to use it. thanks friend.

    • avatar image
      Derek Price
      December 22, 2016 Reply

      I was confused myself but I wrote about how simple it is to use. I don't need all those fancy options

Leave a reply

Post your comment
Enter your name
Your e-mail address

Story Page