Sweet ‘n Simple HTML: Helping Html to Escape

This post shows you how to include snippets of code in blog posts or comments --- in such a way that they don't disappear. The only way to display real code is to help the html  "escape" your platform's  built-in editor.

Why do I need to see html code?

Good question.

Here are a few instances where showing code comes in handy:

• Getting help with a new widget
  Some readers had problems installing the Grab My Button scrollbox. They asked for help and pasted their html code into the comment box. But after they  pressed  "submit comment," their code disappeared! Then I had to use my crystal ball to determine the problem.  A nice code snippet would prevent headaches and breakdowns on both sides of the blog table.
• Participating in a user or discussion forum
  Similar to the point above, as a forum member you may have to provide your troubled code. You could also want to offer your magnificent solution for others to use. Many forums provide an icon to frame and show your code rather than act on the tags.
• Tutorial instructions
  If you provide blogging tips, chances are you need to show code that readers can just copy and paste into their blogs. But remember your Editor is on the lookout for raw html to execute  --- translate into formatted text (e.g. tables, paragraphs, color, background, text areas, etc.) So you need a way to say "display but don't translate."

How can I show my html code in comments?

Another good question.

In a previous post we told you that some commenting systems let you use the <code></code> tags.  If so you can then frame your html to show plain text. However this does not always work in forums or on all blog commenting systems. Basic Blogger commenting will not accept that tag, while it does work on JS-kit (third party) commenting.

Surprisingly, the code tag doesn't work on our comments even though the tag is allowed! So instead of getting this when you frame the html:

<img src="http://cdn.bloggingwithsuccess.net/wp-content/uploads/2009/03/logo-bws1.png">

your comment would show the actual image:

The foolproof method  is to use online converter software to add "escape codes." You can then copy and paste  into your comment or forum entry.

What is an escape code?

Yet another good question.

The goal is to prevent WP or Blogger from butchering your attempt to display html in your comments or posts. To do this you have to "disguise" the html tags and get past the html sensors. Escape codes hold the key.

Escape codes are special characters like ampersand (&) followed by letters like "lt;" or "gt;".  These escape sequences cause the html tag to be displayed instead of executed. So "&lt;" displays as the  less-than symbol and is not treated as the real html tag, "<".

How to let your html code escape

The Bulletin Board Code Converter is a good resource.

1. Paste or type your comment, including the html, into the conversion box.
2. Press the "html to text" button.
3. Copy and paste the new text, strange looking characters and all, into your comment! Then submit the comment.

If you want to use the code in a tutorial, paste the new text into the html tab, and it will display as text. Putting it in the visual tag will show the escape codes! For WP you can use a plug-in like  SyntaxHighlighter for most instructional code. However, it never hurts to have a backup plan.

The Bulletin Board converter also has buttons for transforming html to bulletin board code ( bbCode) and bbCode to html.The boards  use "[" and "]" symbols to frame commands.

I've also used the Html Escape site, which escapes other codes like "space to &nbsp;".  Okay, that last sentence was too much information to share!

Summary:

Don't be at a loss when you need to display real html codes. Add this trick to the other seven "sweet and simple" html tags to spruce up your comments. For more detail,  read our background on CSS/HTML for the beginners.

Be sure to leave a comment on how you've helped html escape. Your secret is safe here.