Internet Marketing Truth

Category Archives: Plugins

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.