39 How to display code properly in your blog posts
November 01, 2007 /

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: | | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

39 comments:

  1. Hello Amanda,This is sanath again.Thanks for your help in giving me this.I know I have contacted you for the same reason and you have given the same as a post now here.Thanks for everything and just have a look at my blog now which you helped me to make it out.
    http://www.imageglitters.blogspot.com

    ReplyDelete
    Replies
    1. I truly appreciate this post. I've been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thanks again!

      Delete
  2. Hello Sanath,

    Glad to see this works fine for you now in all browsers! Good luck for your new project! It's certainly a good idea for a blog, and I imagine you will soon start to receive many visitors for your work.

    Best wishes,

    Amanda

    ReplyDelete
  3. Using the character entities is an excellent way to insert other unusual characters as well. If you're working on a blog entry with foreign words or currency marks, for example.

    And I use this quite often to insert quotation marks within the TITLE code of my hyperlink and image tags - like when referencing an online magazine article.

    ReplyDelete
  4. Suppose I want to display the entities as entities itself, ie I don't want to convert it into HTML; How should I give that in the post-editor?

    ReplyDelete
  5. Thanks for the information. I made good use of in the post that my name links to.

    ReplyDelete
  6. Oops, name doesn't link to the post in the comment above. Maybe it will this time. If not the URL is here:

    http://www.wakelp.org/2008/09/how-to-add-read-more-link-by-double.html

    That page describes a method for selective use of "read more" with classic blogger template. I used the information on this Blogger Buster page to display the code correctly.

    ReplyDelete
  7. Thanks for the link to the HTML parser. That sure came in handy today, for a post I am writing.

    ReplyDelete
  8. Excellent. Well explained, thanks.

    ReplyDelete
  9. why when i put some html code at blockquote it become say like this Your HTML cannot be accepted: Tag is not allowed:

    ReplyDelete
  10. Thank you for the codes.But it takes alot of time to write them for long codes. Is there any software that can do it automatically?

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. A great tool for generating html for your code is
    Pygments.

    ReplyDelete
  13. Hello,
    I want to setup a prograamming source codes blog for my domain how2program.com using wordpress. Can anyone tell me how to properly display php or any other programming codes in wordpress posts

    ReplyDelete
  14. Hello

    I just want to say big thanks. I was trying to display html in my blog for about last 3 hours. No success, until I find your Iframes tutorial. It was really helpful. I have write an article about this here http://tipstobusiness.blogspot.com/2009/07/how-to-display-html-code-in-blog.html

    Of course I did not forget to post your link as well:)

    ReplyDelete
  15. Thanks, but there should be an easy way to do this...

    ReplyDelete
  16. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  17. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  18. This article is novel,Custom Soccer Jerseys I really love it. I also have some ideas written in my article, you can have a look if you have the interest.ac milan jersey We can also discuss different topics.

    ReplyDelete
  19. I wanna say something,barcelona jerseyespecially if I read a post that really grabs my attention. However, I won’t do it for the sake of doing it.argentina soccer jerseyI just think that I really like in your article point of view.

    ReplyDelete
  20. I was looking at you wbsite,Michael Vick Jersey which is wonderful, and noticed that you have a postcard published by my cousin, Mathew Gardner. I am currently researching our family history and wondered if you had Authentic NFL Jerseys Cheap the original postcard and any other information whih has not been published on your website.

    I have some information which I would be happy to furnish if you wish to get in touch.Cheap Steelers JerseysLooking forward to hearing from you.
    Randall Cunningham Jersey
    Darryl Tapp Jersey
    Ronnie Brown Jersey
    Kurt Coleman Jersey
    Reggie White Jersey

    Asante Samuel Jersey
    Brandon Graham Jersey
    Nnamdi Asomugha Jersey
    Dominique Rodger Jersey
    Vince Young Jersey

    Brian Westbrook Jersey
    Mike Quick Jersey
    Nathaniel Allen Jersey
    Donovan McNabb Jersey
    Stewart Bradley Jersey

    ReplyDelete
  21. Thanks for the article.
    Expecting more posts from you in future.

    ReplyDelete
  22. Good luck for your new project! It's certainly a good idea for a blog, and I imagine you will soon start to receive many visitors for your work.LED Light Bulb

    ReplyDelete
  23. Thank you for the information that provided.

    ReplyDelete
  24. Thank you for the information that provided.

    ReplyDelete
  25. I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the beginning to the end. I would like to read newer posts and to share my thoughts with you.

    ReplyDelete
  26. I mean that this is a sensible site.You have so much knowing about this issue, and so much attention. You also know how to get people to shift behind it, obviously from the side effects.

    ReplyDelete
  27. I wanna say something, if I read a post that really grabs my attention.

    ReplyDelete
  28. The Scandinavian push is cnn surprising. After securing licensing rights for baidu and Portuguese content last year for its sina news service in South America, Spain and Portugal seemed to be logical choices for its next markets. And given Europe's sovereign debt crisis, the relatively sturdy and financially stable Germany would've been a baidu news choice.

    ReplyDelete
  29. I read and walked for miles at night along the beach, writing bad blank verse and searching endlessly for someone wonderful who would step out of the darkness and change my life. It never crossed my mind that that person could be me.

    ReplyDelete
  30. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete
  31. I’m impressed. Very informative and trustworthy blog does exactly what it sets out to do. I’ll bookmark your weblog for future use.

    ReplyDelete
  32. A real informative blog like this is an exceptionally cool helping resource for a needy information seeker like me! Thanks a lot...

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy