How to Post Code Snippets (HTMLPHPCSS) in Wordpress Posts?

Wordpress is a very good personal publishing platform, no arguments there. But after all these years of development Matt & friends are still working on a way to allow the users to post code snippets in Wordpress Blog posts. If you just type in a Javascript, CSS, HTML, XHTML, PHP,C++, JAVA, XML or any other program or code snippet to a blog post, the published post will be a total mess.

The root of the problem is the way Wordpress handles symbols like < and > . The published post will usually ends up with all < & > replaced with & l t ; and & g t ; .

Solution
In order to resolve this problem the characters in the code should be converted to html. Well, as you know if there is anything wordpress can’t do there will be a plugin for it. In this case there are many, from simple decoders to complex code formatting frameworks. Lorelle compiled a very good list of tools, services and plugins to help us, bloggers. Here is a few of them I liked:

You may use these tools to get HTML version of your code which can be posted in the wordpress wrapped with <code></code> and <pre></pre> tags.

Example:

	<!--content with more link-->
	<?php the_content('<p>Read the rest of this entry &raquo;</p>'); ?>

	<!--for paginate posts-->
	<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>

Online Tools

1. HTMLizer – Paste your code in the text box and geerate the html version, ready to be pasted in your blog post.

2. Keyboard HTML Character Entities Converter – This tool is helpful to find out the code for rare characters like ω (ω).

Wordpress Plugins

1. Decoder Button – Provides a button in the Wordpress editor. Just select the plain code and click the Decode button to get the html formatted version. I’m using this one and happy with it!

2. Code Autoescape

3. Wordpress Code Snippet

For more options like Syntax highlighting check the links in Lorelle’s post.

Tagged as: code, plugin, Wordpress