Syntax Highlighting with the Code Highlighter Macro for Mephisto

March 24th, 2008

Dan Webb has an alternative to the built-in syntax highlighting provided by Mephisto that uses JavaScript to markup your code by using regular expressions to tokenize the code. Nifty, and based on this DHTML behavior.

Here is a summary of the install:

  1. Use svn to pull from http://svn.danwebb.net/external/rails/plugins/filtered_column_code_highlighter/trunk/ into the vendor/plugins directory
  2. Do either of:
    1. Copy the assets/*.js to your public/javascripts directory
    2. rake install (copies to themes/site-1/javascripts)
  3. Create a new CSS stylesheet (codehighlight.css) with the syntax coloring you want; I used this as a start.
  4. Add the following to your layout.liquid template
{{ 'codehighlight' | stylesheet }}
{{ 'code_highlighter' | javascript }}
{{ 'html' | javascript }}
{{ 'ruby' | javascript }}
{{ 'css' | javascript }}
{{ 'javascript' | javascript }}

Now the following markup:

<filter:jscode lang=”javascript”>document.someScriptThing = “BOO”</filter:jscode>

Generates:

document.someScriptThing = "BOO"
Posted by leshill Filed in