How to display Source Code on your blog posts or Website?
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 <) 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.
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.
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.