This plugin is a bit confusing if you look at the plugins settings page. Take my advice below about how to post a code like a pro and not mess anything up. 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
FYI, you don’t even have to read the instructions on the official plugins page because I’ll make it really simple in which is what I do anytime I want to share a code on WPOutcast.
How To Install The Plugin
Go to your plugins page and click on Add New and type in the following text into the search box like shown below. (Crayon Syntax Highlighter)
- Detailed tutorial: How To Install WordPress Plugin Through The Admin Dashboard
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 like below.
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. WAIT A MINUTE! Follow the advice below for how to use the plugin because I made screenshots and everyone just loves pictures.
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. FYI, you do know that you have a “text” and “visual” mode when you want to write content right? Here is how to use both version to post code which are very similar methods.
Start off with a blank canvas. Well….. I decided to start a new blog post to publish later as you can see in the image below.
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.
- Also Read: How To Add A Search Box On Your Blog
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 blow image when you are finished.
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 slit twist. (sort of)
Again let’s start with a blank canvas like below. Click the visual button first.
Let’s begin to add another code to this amazing blog post I am writing. Can’t find the “Crayon” button right? It’s now an icon. Check out the image below.
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”
Once you have clicked on the “Add” button, you’ll see the code inside the blog post/page like so.
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. It gives you less chances at accidentally deleting the **pre** code tags you see in the “Text Editor” and have a non working code. Remember, if you mess up your code when you publish it, your visitors will have issues with their blogs and you will get negative response’s. My suggestion would be to use the “visual editor” version when you want to post codes.
- Also Read: Recommended WordPress Hosting For Bloggers
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… its simple right?
The Crayon Syntax Highlighter plugin is the right choice for sharing codes on your blog. Again, here is another example of posting codes inside a blog post.
If you have found this tutorial helpful in any way, please consider sharing it online with your followers.