Railscast style syntax highlighting redux

With a new version of Wordpress just installed, I went looking around for a Rails-style syntax highlighter plugin. I’ve always been a fan of Ryan Bates’ excellent Railscasts series (and the Textmate-style code highlighting), so I wanted to see if I could find the same for Wordpress …

I came across this post by Adam Fortuna, which shows how to get “Railscast Style” syntax highlighting working with Wordpress and the SyntaxHighlighter Plus plugin. Unfortunately, this older plugin is not endorsed to run newer versions (>2.7) of Wordpress and seems to be now superceded by the more popular SyntaxHighlighter Evolved plugin. Adam has provided a githib project containing a Railscast style CSS theme for that plugin.

After a bit of poking and prodding, I was able to get this working with the new SyntaxHighlighter Evolved plugin. To do so, follow the steps below:

1. Install the SyntaxHighlighter Evolved plugin using the WP administration interface (Plugins > Add new … Search for “syntaxhighlighter” and install the SyntaxHighlighter Evolved plugin – it’s the first result in the list!)

2. SSH / access the server running your wordpress instance, and navigate to the WP plugins directory (mine is in /var/www/wordpress/wp-content/plugins …)

3. Create a new file in the sub-directory syntaxhighlighter/styles for the Railscast style. (In keeping with the filename conventions, I called mine shThemeRailscast.css). Drop the content of Adam Fortuna’s github CSS style into this file.

4. Modify the syntaxhighlighter.php file in the plugin sub-directory, and add the following fields -

• Below the CSS theme definition for RDark, add an entry for the Railscast theme

wp_register_style( 'syntaxhighlighter-theme-rdark',
plugins_url('syntaxhighlighter/syntaxhighlighter/
styles/shThemeRDark.css'),
array('syntaxhighlighter-core'), $this->agshver );

wp_register_style( 'syntaxhighlighter-theme-railscast',
plugins_url('syntaxhighlighter/syntaxhighlighter/
styles/shThemeRailscast.css'),
array('syntaxhighlighter-core'), $this->agshver );

• Below the menu drop-down definition for RDark, add an entry for the Railscast theme

$this->themes = (array) apply_filters( 'syntaxhighlighter_themes', array(
...
'rdark'      => __( 'RDark', 'syntaxhighlighter' ),
'railscast'  => __( 'Railscast', 'syntaxhighlighter' ),
 ...

5. Finally, navigate back to the SyntaxHighlighter Evolved plugin settings page in Wordpress and select Railscast as your default theme.

If you have followed the steps correctly, you should have Railscast-style highlighting enabled. Here’s a sample (lifted from Adam’s posting):

# This is a comment
class Test
  @testingalongname = "Something here"
  CONSTANT = 2323
  def test
    return (1*5)
  end
end

That’s it! Enjoy your Railscast-style syntax highlighting …