How To Use 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 and even on the latest Genesis Framework version 2.4.2 as of December 24, 2016.

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 text
Since I forgot to blow up the image a little more, it’s hard for you to tell where the “Crayon” button is on the menu bar. To post a code, you would click on the “crayon” button then this box appears like below.

crayon syntax empty
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 post example

The red lines inside the code mean nothing at all (remember that). Now we are ready to click the “Add” button to show this code in your blog post. It will look like the image below when you are finished.

crayon post code
You see the **pre** tags at the beginning and end of the code? Don’t touch this 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 doing it the correct way.

live code

Visual Editor

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

Again let’s start with a blank canvas like below. Click the visual button first.

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

crayon visual button
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 visual add
Once you have clicked on the “Add” button, you’ll see the code inside the blog post/page like so.

crayon visual code
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.

Comments 2

Leave a Reply

Cloud WordPress Hosting