There are times when bloggers and technology writers need to provide HTML, PHP, CSS, ASP, JavaScript and other programming language codes in their posts or articles. If you have ever tried to display HTML code on web page directly (by putting plain HTML), you might have ended up with a mess after publishing or previewing the post. Actually, web browsers render web pages using HTML tags, and when someone uses the HTML tags directly to display them as code, browsers can’t differentiate them with the page’s markup and use them directly to render the web page. It is strictly not recommended to write HTML and other programming language codes in the plain (non-parsed) form as it may break the markup of your website / blog.

Some Programming languages for eg. CSS can’t harm your markup unless they are provided full support to function. In case of CSS, the code will only work if it will be wrapper / contained within <style></style> tags. But still, using the parsed form of code is the best practice.

What is Parsed code?

Parsing the code means making it compatible to display correctly on web pages without harming the markup. After parsing, symbols like <, >, " etc. are converted into HTML entities or a merged form (for eg. < will become &lt;) that is easily understandable and differentiable by web browsers from the HTML tags.

Tip: Parse your code instantly with Quick HTML Parser

It is also true that using Visual (WYSIWYG or text-rich) post editors while writing a post display the code correctly. I haven’t tried it much and can’t say that it works in all cases. But we have more efficient alternatives to display source code in our posts. You may implement below given simple alternatives to achieve that:

  • Parse the code before putting it in the post. You can use our Quick HTML Parser for that. After parsing, enclose the code using <code></code> or <pre></pre> tags.
    display html code on web page

    Note: This method will not work if you use it in WYSIWYG or Visual editor on your blog platform.

  • Use WordPress Code Shield plugin, which do not requires to parse the code. Just paste your code and enclose it within <code></code> or <pre></pre> tags and publish your articles.
  • You may also use some more alternatives like Syntax Highlighter to display as well as decorate the code in your blog posts. You may read more about its usage in its installation section. Below screenshot shows how Syntax Highlighter decorates the code in blog posts.
    Syntax Highlighter to display and decorate the code

There are lots of plugins and tools available on the web to achieve it differently, but the above ones are very simple and the common ways. Let me know what do you use to display the code in your posts. Also see how to use PHP in WordPress Posts.