SyntaxHighlighter Drupal Setup

David's picture

SyntaxHighlighter is a pretty neat and widely used JavaScript Library to display code in an easy to read manner on a web page. There is a Drupal module out there to incorporate this script. By adding it as a plugin it creates extra processing on the server and can easily be added manually with a theme. By doing it this way the script remains purely as a client-side script. These same install steps can be used for almost any JavaScript library you need to include on your site. 

  1. Upload the CSS and JavaScript files to your theme’s folder on the server. Your theme should be located at sites/all/themes or in a multi-site install sites/my-domain.com/themes.

    In the themes folder I uploaded all of the JavaScript files to a sub-folder called “syntaxhighlighter” and then placed all of the Cascading Style Sheets files in a “styles” folder within the “syntaxhighlighter” folder. It is really up to you on how you want to organize it. 
     

  2. Next you need to edit your theme’s info file so that a few CSS and JS files get included into your theme. There should already be some included CSS and JS files so you just need to tack on the shCore.css, shThemeDefault.css, shCore.js, and shAutoloader.js.
stylesheets[screen][] = syntaxhighlighter/styles/shCore.css
stylesheets[screen][] = syntaxhighlighter/styles/shThemeDefault.css

scripts[] = syntaxhighlighter/shCore.js
scripts[] = syntaxhighlighter/shAutoloader.js
  1. The last installation step is to have SyntaxHighlighter load JavaScript files automatically depending on the language and go through the page and format the code.For Durpal 7+ there is a ‘html.tpl.php’ template. If this is not included with you theme you need to copy the default version into your theme from modules/system/html.tpl.php. If you are using Drupal 6 then you should be able to edit the page.tpl.php in your theme. Just add the following in a <script> tag right before the closing <body> tag.
function path() {
    var args = arguments,
        result = []
        ;
   
    for(var i = 0; i < args.length; i++)
        result.push(args[i].replace('@', 
        '/sites/sharperconcepts.com/themes/sc2012/syntaxhighlighter/'));
   
    return result
};

SyntaxHighlighter.autoloader.apply(null, path(
    'applescript            @shBrushAppleScript.js',
    'actionscript3 as3      @shBrushAS3.js',
    'bash shell             @shBrushBash.js',
    'coldfusion cf          @shBrushColdFusion.js',
    'cpp c                  @shBrushCpp.js',
    'c# c-sharp csharp      @shBrushCSharp.js',
    'css                    @shBrushCss.js',
    'delphi pascal          @shBrushDelphi.js',
    'diff patch pas         @shBrushDiff.js',
    'erl erlang             @shBrushErlang.js',
    'groovy                 @shBrushGroovy.js',
    'java                   @shBrushJava.js',
    'jfx javafx             @shBrushJavaFX.js',
    'js jscript javascript  @shBrushJScript.js',
    'perl pl                @shBrushPerl.js',
    'php                    @shBrushPhp.js',
    'text plain             @shBrushPlain.js',
    'py python              @shBrushPython.js',
    'ruby rails ror rb      @shBrushRuby.js',
    'sass scss              @shBrushSass.js',
    'scala                  @shBrushScala.js',
    'sql                    @shBrushSql.js',
    'vb vbnet               @shBrushVb.js',
    'xml xhtml xslt html    @shBrushXml.js'
));
SyntaxHighlighter.all();
  1. Now when you post content to your website the only thing you need to do now is put your code in a pre tag, <pre class="brush: js">, with the right class defining the type of code. Remember to replace any < and > characters with &lt; and &gt; in your code too to ensure correct rendering.