Internet Marketing Truth

Finding A Way To Display Code On Page In WordPress

I did a search for “code on page wordpress plugin”

The first result I looked at was “Hana Code Insert” plugin. After reading the description, this is not what I need. Although it may come in handy in the future. This plugin is described as:
“Easily insert any complicated HTML and JAVASCRIPT code or even custom PHP output in your WordPress article. Useful for adding AdSense and Paypal donation code in the middle of the WP article. You can manage multiple code entries.”

The second result I clicked on “Allow PHP in Posts and Pages” was pretty much the same as the Hana one.

None of the other 10 results seemed right. So I decided to do a search for “display code on page wordpress plugin”. Nothing in the first 10 results. Nothing on the second page… Mmmmmm

Let’s try searching for “display code wordpress plugin”. The seventh result down:
12 WordPress Plugins to Display and Highlight Code within your Blog
http://speckyboy.com/2009/02/19/12-wordpress-plugins-to-display-and-highlight-code-within-your-blog/

I read all the way through the list. I clicked on the link for the four that looked interesting.

CodeColorer: http://wordpress.org/plugins/codecolorer/
This plugin hasn’t been updated in over 2 years
Looks promising. I’ll try this one first.

Google Syntax Highlighter for WordPress: http://wordpress.org/plugins/google-syntax-highlighter/
This one hasn’t been updated since 2007-8-14
That worries me a bit

Code Markup: http://thunderguy.com/semicolon/wordpress/code-markup-wordpress-plugin/
Looks promising but it gives this warning: “because the display is wrong, you can’t edit code after it has been saved.”
I don’t like this because what if I want to use the code somewhere in the future?

EDIT: The Code Markup plugin is not a problem. What I am trying to do is the issue. I want to display code but I also want the visual editor. If I want it all, then I need to be prepared to make the extra effort as I have ultimately done by going with iFrames.

FV Code Highlighter: http://www.frank-verhoeven.com/wordpress-plugin-fv-code-highlighter/
Read through the page. Not totally sure what this one does.

So I’ll try the CodeColorer.

I log in to the site and go to Plugins -> Add New
I do a search for “CodeColorer”

I scroll through the results and come across: WP Code Highlight

This looks promising. It was updated only 155 days ago. But then I read under Basic Useage:
“Dashboard”->”Users”->”Your Profile”->”Disable the visual editor when writing”

I really don’t like this.

Maybe I should look at using an iFrame with a notepad file.

I remember that I had used an iFrame plugin on the Career Connections site. Let’s go see.

Sure enough: Advanced iframe

I remember I had done a bit of research and testing to finally land at that one.

So I’ll install it here.

That didn’t work. It only allows me to have one iFrame. I need multiple. Ugh.

Back to search for another iFrame plugin.

I go back to Plugins -> Add New
I do a search for “iframe”

The first result is simply called “iframe”

I click on the Details link. In the description it mentions that WordPress has an [embed] shortcode that is a core feature. Let’s try that.

That seems to just give a link to the file. Alright. Let’s try installing the iframe plugin.

The iframe plugin is only 53 days old. Has a good rating. Let’s try it.

I go back to the details page for the iframe plugin. I click install.

On the plugin page I see a link for “All iframe params”: http://wordpress.org/plugins/iframe/other_notes/

From there I grab the parameters I want and end up with the iframe shortcode:

/////// Code ///////

[iframe src="http://imverity.com/assets/iframe-shortcode.txt" width="100%" height="120" scrolling="yes"]

The resulting iFrame and text file that is displayed doesn’t clearly indicate that it is separate from the page and that it is code. So I wrap it in a div with a grey background:

/////// Code ///////

[iframe src="http://imverity.com/assets/iframe-surrounding-div001.txt" width="100%" height="120" scrolling="yes"]

Which serves to separate and make the code obvious.

This is what the final code looks like:

/////// Code ///////

[iframe src="http://imverity.com/assets/iframe-code-full.txt" width="100%" height="220" scrolling="yes"]

So now I have a way to show code on the site while maintaining the integrity of the code.

I may find a better way at some other time. For now this works.

As a side note:
If I wanted to hand code a piece of code so that it is part of the wordpress page and yet also displays correctly, I can use the following HTML Codes:
http://www.ascii.cl/htmlcodes.htm

This is a great resource that I use all the time to look up the HTML codes I need.

2 Responses to Finding A Way To Display Code On Page In WordPress

  1. Bennett says:

    Just a note about Code Markup: The plugin is written to be as simple as possible. Because the WordPress visual editor has some problems displaying code correctly, Code Markup should only be used with the HTML editor. If you want to use the visual editor, you should use a different plugin.

    Thanks for this post. It’s amazing how hard it can be to find a good code plugin…

    • Kegan says:

      @Bennett; Thank you for your comment. I know it’s not the plugin. I’ve made an edit above in the post to reflect that. WordPress is a blogging platform but we have all tried to make it fit our purposes. The html editor was designed to keep the content and the code nice and clean. It does that wonderfully which is why I don’t want to turn it off.

      Unfortunately, leaving the visual editor on does interfere with this plugin. Wish I could have both. But alas, I must resort to my alternate methods.

      So I did end up using a different plugin that ends up accomplishing my goal but in a different method with more work involved: text files, ftp and such.

      So what do you think of my solution?

      It really is amazing how hard it is to find the right plugin sometimes. This really is the first time I’ve looked for a code plugin. Maybe someday I’ll find one that will work with the visual editor turned on while not being too bloated and slowing down the site.

      If anyone finds one, please do let us know.

      Thanks again for reading and commenting.

Leave a reply