Chris Coyier has done a nice job going through the various considerations to make when posting code in WordPress content. He covers using
<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
<code> tags in the HTML editor. The editor will auto-switch the HTML of your snippet to HTML entities but keep it in the
<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.