[Wordpress] Display HTML Tags inside Pre

Display HTML Code in Wordpress Post

In Wordpress posts if we write any HTML codes in Text editor, the code will not be displayed. Instead of code, Wordpress, sends the HTML code as it is. The web browser compiles the code to display its output. Hence the code will not visible to the reader. To avoid this, follow these steps

1. Write code in visual editor.
2. Select the code.
3. Change format to 'preformatted'

Now, this will decode the HTML code. If you click on text editor and see the HTML or Javascript codes, it will now be in decoded format. So, the web browser does not compile it and the output will display the code as it is.

Decode HTML Tags for Pre/Code

The alternate method is to use online HTML decode services available. Google for HTML decode and you will get many matching online decoders. Then follow these steps.

1. Copy paste your HTML or Javascript code to decoder.
2. Get it decoded.
3. Copy the resulting HTML code.
4. Paste it in text editor.
5. Wrap it with <pre> tag

Now, click on preview page and you could see the actual HTML codes. If you are managing a HTML or Javascript tutorial blog, then it is inevitable to include code snippets in your pages. In that cases, these tips will be more useful. External Reference: Stackoverflow discussion on same topic.