Option 1: Embed gists (uses Github.com hosted code snippets)
- Pros: Simple way to add code once set up if you have a github account
- Cons: Theme customization or custom plugin required, Github becomes a site dependency
This method requires adding the following embedded gist in your functions.php or as a custom plugin if you don’t want it to be theme dependent:
https://gist.github.com/3051438
With the above code, wordpress authors can paste a gist’s url (ex. https://gist.github.com/username/123456) with the username removed from the url string, and it will embed the gist automatically, thanks to Jeff Behnke.
Option 2: Embed Pastes (uses Pastebin.com hosted code snippets)
This can be done a couple ways. You can easily embed the paste code using the embed button on pastebin.com:
This will give you iframe and script options for embedding. I’d opt for the iframe option which looks like this:
<iframe src=”http://pastebin.com/embed_iframe.php?i=NPdB2UGB” style=”border:none;width:100%”></iframe>
And the pastebin iframe on your page or post will look like this:
You can simply replace the string after ‘i=’ with your pastebin paste’s url string (not including the pastebin.com/ part).
Pastebin Embed Plugin
The code embedded above is actually the core code for the pastebin embed plugin, a new (at the time of this post) wordpress plugin you can find here.
Option 3: Use the HTML <code> tag and CSS
- Pros: No dependencies, easiest to use off the bat, hosted on your own site inline
- Cons: No syntax highlighting, no raw code option, indenting code is annoying, and it might require css customizations if the theme you are using hasn’t taken this into account
If we just have a quick code snippet to add, say if we’re writing something conceptual where we don’t care about the user being able to view the raw code or want to go through the trouble of creating a gist, we can use the html <code> tag like so:
//this text needs to be formatted with css for background color, font etc., for legibility and copy-ability
add_action('hook_location','hook_function');
function hook_function() {
//do something
}
Here is the css I’m using on this site to style the code tag block:
code {
background-color: #ddd;
color: #777;
display: table;
font-size: 14px;
border-left: 4px solid #777;
padding-left: 15px;
width: 100%:
}
If you’d like to use css to add line numbers to your code, this is a clever way to do it using order lists with the ol and li html tags.
Option 4: Use a Plugin
- Pros: Quick and easy, code gets syntax highlighted and indented as intended, code stays self-hosted on the site
- Cons: More site dependencies on developers to maintain plugins. Developers experienced enough to develop good plugins are busy people. So by nature of the beast, free plugins might not be updated as needed.
The downside to using the code tag is that it won’t use syntax highlighting by default or easily indent code as intended. To do that would require a js library and css file, something like Prettify by Google or Syntax Highlighter by Alex Gorbatchev.
For wordpress specific solutions, these top rated syntax highlighting plugins should work but I haven’t tested:
Leave a Reply