Drupal Syntax Highlighting. Step-by-step Walkthrough

When you search for "drupal syntax highlighting" you will likely get a lot of results involving installation of modules most of them still in beta stage of development. Most of the code you'll find is using SyntaxHighlighter library, which is easy to install and use. Indeed, this excellent library is so easy to use, you don't need any module at all to take advantage of it on your Drupal site. Here's step-by-step tutorial:

1. Download SyntaxHighlighter code from SyntaxHighlighter site. You'll get a file named similar to "syntaxhighlighter_3.0.83.zip".
2. Unpack this file to your Drupal site somewhere in "sites/all" subdirectory. For the purpose of this article I will use "scripts" subdirectory so the path to the library's index.html file becomes "/sites/all/scripts/syntaxhighlighter_3.0.83/index.html".
3. Create new text format. For Drupal 7 it's in Administration » Configuration » Content authoring - Add text format, Drupal 6 has it in Administer » Site configuration » Input formats - Add input format (/admin/settings/filters/add). Use "Raw HTML" as format name, check administrator role and leaving all filters unchecked click "Save configuration".
   At this point you are ready to highlight source code. You can write a new article selecting "Raw HTML" for text format with the following content:

   <pre class="brush: js">
   function foo() {
   }
   </pre>
   
   <script type="text/javascript" src="/sites/all/scripts/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
   <script type="text/javascript" src="/sites/all/scripts/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
   <link href="/sites/all/scripts/syntaxhighlighter_3.0.83/styles/shCore.css" rel="stylesheet" type="text/css" />
   <link href="/sites/all/scripts/syntaxhighlighter_3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript">
        SyntaxHighlighter.all();
   </script>
   

   and it will render beautifully:

   function foo() {
   }
   

4. It's a chore however to write style and script import lines every time, so let's go ahead and create a new block. Put "Syntax Highlighter Block" in description field, select "Raw HTML" as format, and fill the body with:
   

   <script src="/sites/all/scripts/syntaxhighlighter_3.0.83/scripts/shCore.js" type="text/javascript"></script>
   <script src="/sites/all/scripts/syntaxhighlighter_3.0.83/scripts/shAutoloader.js" type="text/javascript"></script>
   <link href="/sites/all/scripts/syntaxhighlighter_3.0.83/styles/shCore.css" rel="stylesheet" type="text/css"/>
   <link href="/sites/all/scripts/syntaxhighlighter_3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css"/>
   
   <script type="text/javascript">
   function path()
   {
     var args = arguments, result = [];
     for(var i = 0; i < args.length; i++)
         result.push(args[i].replace('@', '/sites/all/scripts/syntaxhighlighter_3.0.83/scripts/'));
     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'
   ));
   </script>
   <script type="text/javascript">
     SyntaxHighlighter.all();
   </script>
   

   If your path to SyntaxHighlighter code is different, change the links and path function accordingly.

5. Go to your theme settings and put Syntax Highlighter block into Footer.
6. Create a new article (text format should be "Full Html", "Raw HTML" is no longer required) and write:
   

   <pre class="brush: c#">
   static void Main(string[] args) {
     Console.WriteLine("Hello World!");
     Console.WriteLine("Hello yourself!");
   }
   </pre>
   

7. Now it's time to relax and celebrate! If some fine tuning is required it's always helpful to read the manual.