How to display code properly in your blog posts

HTML and Javascript codes perform different functions for our blog posts, such as changing the appearance of text like this. But when we need to display the actual code used to perform these functions, we can't simply paste this code into a post as it will perform the function, and not display as regular text.

As you may have seen in my other posts, I use two different methods to display code as text which can be read, copied and pasted for your own use. These are blockquotes and iframes. In this post I'll explain how you can use these methods to display readable code in your own blog posts.

The problem when trying to paste code into your posts is that it will perform the intended function, rather than display as regular text. For example, if I wanted to explain how to make text italic, I could try adding this into my post:

<i>This is italic text</i>

But if I simply paste this code into a post, the effect will be this:

This is italic text

This is because the code is performing the function of the code I pasted, rather than displaying as readable text.

To display this code as text, we need to use "character entities instead.

What are "character entities"?

You could say that HTML uses a special language, and that we need to say things in a different way for a web browser to understand it. Character entities make the browser understand that we want to display a certain character, rather than use the function of this character.

Character entities are made up of three parts:

1. An "ampersand" (the & symbol)


2. Either a descriptive phrase, or a # followed by a number


3. A semicolon (the ; symbol)

Here is an example of the character entity for the © (copyright) symbol:

&copy;

This example uses the descriptive phrase "copy", though it could also be used with the # and it's number instead:

&#169;

Either of these methods will have the effect of reproducing the © symbol in your blog post (or in any web page for that matter!).

The most common character entities you will need to use

Here are the most common characters and their equivilent character entities you would need to use to display code in your posts:

Result	Description	Entity Name	Entity Number
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
"	quotation mark	&quot;	&#34;

For a complete list of character entities, take a look at the reference page provided by W3 Schools.

Using the character entities

In the code you would like to display, you will need to substitute each of the HTML characters above with the equivalent character entity. For example:

<i>This is how to display italic text</i>

Should be written instead as

&lt;i&gt;This is how to display italic text&lt;/i&gt;

This is more commonly known as "escaping" the HTML code.

You could write these character entities by hand each time you need to display code in your blog posts. However, I find it easier to use the "replace" function in Notepad to replace each instance of a certain character with the equivalent character entity. Alternatively, you could use the free HTML code parser tool provided by BlogCrowds which can substitute all necessary characters for you in one click!

Displaying the "escaped" code in your blog posts

As I mentioned right at the beginning of this post, I use two different methods to display code in my posts: blockquotes and Iframes (inline frames).

Blockquotes

Blockquotes are useful if you only need to display a small section of code. Usually, your blog template will indent any content which is enclosed in <blockquote> tags; sometimes styling will also be used, such as a different colored background or border.

To display your code as a blockquote, you will need to use the following format:

<blockquote> Your content/"escaped" HTML code goes here </blockquote>

Iframes

Iframes (inline frames) are more useful to display long sections of code, such as the template codes displayed in the Templates section of this blog. They are used to display the content of an external file in the body of a page, and can be used to display a large amount of content in a small amount of space. If the dimensions of the iframe are smaller than those of the content it contains, the iframe will have scrollbars so your readers can access the whole content.

Unfortunately iframes are slightly more difficult to create than blockquotes as the content of the iframe must be externally hosted; it is not a part of the page itself.

To create the content of an iframe, you will need to create an HTML file containing your "escaped" code. Don't worry about adding all the elements of a regular web-page, such as the head and body tags: the easiest way to create the HTML file is to paste your escaped HTML code into your favorite text editor (such as Notepad) and save this with an ".html" extension.

You will then need to upload this to your hosting account, and note down the URL of this HTML file. If you don't already have an external hosting account, check out this post to read about some of the best free hosting providers.

Once you have uploaded your HTML file to an external host, you will need to call the iframe in the body of your blog post. To do this, you can use the following format, substituting the example URL for that of your HTML file:

<iframe src="http://hosting-provider.com/your-file.html"><iframe>

You can then preview your blog post to ensure the code displays correctly within the iframe.

If you prefer, you can also specify the dimensions of the iframe to ensure it doesn't stretch too far down or across the page in your post like this:

<iframe src="http://hosting-provider.com/your-file.html" width="400px" height="200px"><iframe>

I hope this explanation helps you to display code correctly in your own blog posts. If you found this tutorial useful and would like to know about future updates, why not consider subscribing to the Blogger Buster feed?

Technorati Tags: code | iframes | blockquotes | display | blog+posts