Best Practise on embedding code on Wordpress?

Question

I have two blog sites. One hosted with Wordpress.com, one self-hosted with Wordpress.org

We are a technical company, and a number of our blog posts will be about HTML, Javascript, .NET, etc. and we would like to embed code snippets within our posts.

We have about 20 authors on each blog, and from experience, I need to make inserting code snippets as easy and user friendly as possible.

---

Wordpress.org
I saw, for Wordpress.org, this article.
From what I understand, when writing with the HTML editor, if you apply the tags <code> some code</code> then this preserves the formatting.
- Its ok. But the major downfall, is ease of use. For example, compare it to stack exchange text editor - there is no need to switch to HTML view and write tags, you use the 'Code Sample' button.

I know there are a heap of plugins out there.
Is there a general consensus on the best way to embed code in wordpress.org posts?

My requirements are for it to be as easy as it is with Stack Exchange.

---

Wordpress.com
It appears I can also use the code tags with wp.com.
I guess the advanatage of telling my users to use this approach, would mean there would not be any confusion with authors who contribute to both blogs.

I was currently using the 'preformatted' text format from the extended toolbar (kitchen sink).
I assume there are no other options?

Answer 1

Another option is to put your code snippets into Gist, and use the Embed GitHub Gist plugin. Works well, and has the advantage that your code is revision controlled and can be easily forked.

Answer 2

From my experience, most plugins have problems when it comes to code highlight. currently, I am using Prettify GC Syntax Highlighter and I am happy with it. I also posted step by step guide on how to configure and use it at here

Answer 3

I prefer to use SyntaxHighlighter Evolved which is co-authored by Viper007Bond and automattic. It uses Alex Gorbatchev's JavaScript-based solution which support a large number of languages and is highly customizable.

Answer 4

I needed something like this and tried like 20 related plugins, and they all failed in one way or another. Most of the problems come from WP filters messing with the code, like converting :) to smilies, or adding rel="nofollow" to links etc.

So I ended up creating my own functions. Basically I hook a function on the_content/comment_text with the highest priority, in which I replace all content between PRE/CODE tags with a unique ID, like <-- CODE 1 HERE -->, while I save this content inside a variable (and convert it to HTML entities).

Then I hook another function on the same tags but with the lowest priority (after all those WP filters have been applied to the content), and I replace the ID above with the code stored in the variable.

So the code remains unaltered by any filters. Then I run a simple javascript syntax highlighter script - I chose highlight.js

I can post my code if you wish...

Stackexchange uses markdown, the code gets wrapped between ticks, not html tags. Anyway, the idea remains the same

Answer 5

One thing I will add from personal experience:

Be cautious when embedding code that you will supply for others if you aren't using some type of a syntax highlighter. I've tried both the suggestions of using <pre></pre> and <code></code> tags. They will add an additional space to your php tags, and can also have negative effects on single and double quotes. It wouldn't be good if you suddenly had a blog full of angry users.

I suggest using a syntax highlighter if you plan on offering snippets for others to use. I'll give my suggestion, but I would like to hear what others use as well, so hopefully someone will "chime in": One that I know will work is from Snipplr link to snipplr site (this requires you to sign-up, then you can use the WordPress plugin found here: Link to WP Plugin Directory. I hope that helps.

Answer 6

Selfhosted: You can make shorttags/shortcodes (which most plugins likely will already do) or make custom post types for code-resources, add a meta box to your post edit screens and link from there to your custom post types containing the snippets. Both solutions will likely be a lot of work and nearly the same as using a well written plugin.

My recommendation: Stick with a plugin.

Ad <code>: If you're writing about code you should already be familiar with basic html (so I guess I missunderstood your Q), but anyway: <code> is for inline code and <pre> is for multi line code. The later will preserve line breaks, but the look and feel relies on your css styles.