Code Syntax Formatting in Wordpress Blog Posts

Code Syntax Formatting in WordPress Blog Posts

· by · in

I saw an awesome video that REALLY convinced me that I need to get my blog going, then I remembered what was holding me back from blogging. I hadn’t figured out how to do code formatting in WordPress yet.

That’s a terrible excuse. I will admit that. I let the little things hold me back sometimes. But in my mind, how can I write about code with out being able to separate code from descriptions of problems or solutions? The most terrible thing yet is that I did figure out how to do code formatting a few months ago using the Prettify For WordPress plugin. It worked, but I think I gave up on it because it didn’t meet some standard that I can’t even remember anymore. I’m still irritated by the fact that if you have a code snippet that makes it into the preview of a post it’ll show up completely unformatted. This still shouldn’t hold me back, and it shouldn’t hold you back either.

Once you have the plugin installed it’s pretty simple to get working. You just surround your code with a <pre/> and a <code> elements with the right classes.


<pre class="prettyprint">
hello_world.rb
<code class="language-ruby">
def hello_world
  "Hello, World!"
end
</code>
</pre>

Ends up looking a little something like this:
prettify-for-wordpress

It looks alright, but then I thought it might be simpler to just do everything using gists. It is. No plugins required. Just copy/paste github’s embed url.


<script src="https://gist.github.com/thejayvm/ad67fa2ca50880b0e9a4.js"></script>

gist

I’ll probably use a mixture of both in the future, especially if I have a gist made for other reasons. It’s good to have options. Neither are perfect, but at least I eliminated one excuse for not writing posts. 🙂