WordPress has a habit of automatically filtering and transforming any code that you type in a blog post or WordPress page. In almost all situations, this is simply convenient. However, it can be frustrating when you’re trying to embed HTML code so you can show your readers what the code is supposed to look like.
Overcoming this automatic filter is quite easy, if not a little time consuming. First, you need to surround the code with tags that tell WordPress to ignore what is between them. Second, you need to substitute special characters with numeric HTML code.
Three Easy Steps to Embedding Code
1. Type your blog post or WordPress page as you normally would, then click the HTML tab above the text field. Place the cursor where you would like the HTML code to appear. Type <code> then your code, followed by </code>.
Alternatively, use <tt> and </tt> if you don’t want the code to appear with a grey background.
Here is a comparison of both tags:
Using the code tag: http://theworldwideyou.com/index.php?p=135
Using the tt tag: http://theworldwideyou.com/index.php?p=135
2. Replace all special characters in your code with the HTML numeric code using the key at the bottom of this article. For example, here is what you would have to type to make the sentence above:
3. Click the Save Draft button, then the Preview button. Examine the preview to ensure it looks exactly as you want it, then go back and post the article.
Sources:
WordPress Codex: Posting Source Code
