Chris Coyier has done a nice job going through the various considerations to make when posting code in WordPress content. He covers using <pre> and <code> tags in the WordPress editor directly, using Markdown and Github flavored Markdown, and third party tools like Github Gists and his own CodePen embeds (for front end code).
I personally prefer Github Gists most of the time, because I usually post snippets of WordPress code. I find the GistPress plugin by Blazer Six to be best for this, because it does a nice job caching (Github limits pageviews on embedded gists with API tokens) and I know it’s well written coming from Brady Vercher.
As to his recommendation to disabling the visual editor if you’re posting code, it is possible to get around doing that. The way you do it is to paste your code into the visual editor, then manually put in the <pre> and <code> tags in the HTML editor. The editor will auto-switch the HTML of your snippet to HTML entities but keep it in the <pre> and <code> tags since those were done within the HTML editor. Fragile, but it works. I do this for one and two line snippets that I don’t make gists for, because I also like the visual editor most of the time.
If you’re posting any kind of HTML / CSS / JS, I agree that CodePen is awesome for editing and demos.
If I were to do it over again, I’d probably try to train myself on Markdown a bit better and use it for regular blogging. And the triple backtick code block method for Github enabled markdown (available in Jetpack) is really nice.
I was thinking of a meta box approach so you could write code snippets for a post in dedicated code editors inside that metabox. The downside is then relying on short codes to insert it into the content. Thoughts anyone?
A commenter on Chris’ post recommended the same. Any third party solution also requires shortcodes. Not a bad idea, in my opinion. But it’d need to be a repeatable field for handling multiple code blocks. And it could be a bit unsightly to have that metabox on every post edit screen if you don’t post code that often.
I’m going to work on a metabox / editor button combo solution I think. It would indeed be repeatable fields, but they wouldn’t show until you decide you want to write code on a particular post (so no unnecessary clutter). One of the things I look forward to is being able to use tabs and indent without wrestling with the editor.
I do like Codepen.io and jsfiddle too.
I wonder if an added button to the TinyMCE editor might be even better. It could still work on a shortcode, but it’s a bit more “inline” of a concept.
+1 for Gists. I’ve fought many of the Syntax Highlighter plugins and maybe it’s just me trying to simplify my life, but my last post I used WP Github Gist that uses the [gist] shortcode and was simple flexible and worked. It allowed me to combine all the snippets into 1 Private Gist and looked really good. I would definitely like to suggest the author add a TinyMCE button so I don’t have to remember the parameter names, but still works great!