Railscast Style Syntax Highlighting for WordPress
Update: This blog is no longer running WordPress. It’s now running Jekyll but the URLs should still be valid.
Update 2: Now it’s running Middleman!
Railscasts has easily been the best learning tool for Ruby on Rails that I’ve used. When moving over into Rails, chances are your question will be answered somewhere in 173 episode show archive that grows weekly. If not you can always suggest a idea and Ryan Bates might just make a show out of it. If you’ve never been there then go check it out. I’ll wait. All that looking at the Railscast textmate theme will make you completely fall for the colors. Just about everyone I know at IZEA uses the Railscast Textmate Theme because of this. It’s extremely easy on the eyes, with an indescribable comfort to it. It seemed only natural to want to apply that theme here on the blog as a step towards posting more code. Luckily creating any kind of markup theme with a point of reference is a piece of cake, just need some kind of WordPress plugin to do the heavy lifting. There’s plenty of syntax highlighters out there, with one that called out as being the most feature rich and easy to implement. SyntaxHighlighter Plus is the winner for today.
Implementation
Very simple install, as with any WordPress plugin. Just upload and activate. After that you’ll want to start changing the way you markup your code within your posts to use this new syntax. Instead of using <pre> tags like a number of other plugins, SyntaxHighlighter Plus uses bracket notation. For instance, this block would output some ruby code:
CONSTANT="first"
Code language: JavaScript (javascript)
In it’s finished form, here’s what it looks like. Complete with Javascript hooks for showing just the code, or printing.
# This is a comment
class Test
@testingalongname = "Something here"
CONSTANT = 2323
def test
return (1*5)
end
end
Code language: CSS (css)
Download it
Feel free to grab my very quickly hacked up SyntaxHighlighter Plus Railscast theme , and use if you’re using SyntaxHighlighter Plus. It’s still far from complete as far as syntax highlighters go, but if anyone else out there has any improvements on it, please drop me a line. I’m also looking for some thoughts on other syntax highlighter WordPress plugins out there. Finding the right WordPress plugin can sometimes be a bit overwhelming when there’s dozens that accomplish the same goal, so if you know of any that do it better, I’d love to look into them.
On Github
I added a project on github for this. If you want to make a change to my code, or add support for another WordPress plugin, feel free to push your changes out to me and I’ll add them. Eventually maybe we’ll have railscast themes for all WordPress plugins!
Let's keep in touch 🧑🤝🧑
- Send me an email at [email protected]
- Follow me on Mastodon at @[email protected]
- Subscribe to my monthly newsletter
- Subscribe to my RSS feed
Did you link to this article? Add it here and I'll include it