ITauthor

My last post included some code snippets.

I’ve never found an altogether satisfactory way to include nicely formatted and syntax highlighted code in WordPress. I’ve tried various methods but always ended up settling on something so-so after spending a while on it and eventually deciding I was wasting my time.

But this time round I tried again and found Chris Cagle’s Definitive Guide on WordPress Syntax Highligher Plugins.

In the spirit of “if  it’s good enough for him, it’s good enough for me” I decided to use the same plugin Chris settled on: Chili. You can see the results for yourself. However, although I’m fairly pleased with the end product, the process for getting there (using Live Writer) isn’t ideal. I’m documenting it here because, fortunately, I don’t often use code snippets, so this will serve to remind me how I did it:

1. Copy the code you want to use.
2. Paste it into Postable (an online processor for making code browser friendly):
   http://www.elliotswan.com/postable/
3. Click make it friendly.
4. Copy the browser-friendly code.
5. In Live Writer, go to Source view.

6. Create nested elements as follows:

   <p><pre><code class="html"></code></pre></p>

7. Change "html" for "php" or "c#" or "mysql" or "javascript" or "css". There are a few other supported languages listed on the Chili site. 

8. Paste the code into the middle, between the code tags. For example:

   <p><pre>
     <code class="html">&lt;p&gt;&lt;pre&gt;&lt;code class=&quot;html&quot;&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;</code>
   </pre></p>

9. Publish your post.