Gorbachev's Syntax Highlighter

Russell Bateman
June 2014
last update:

This is how I do a document using Gorbachev's Syntax Highlighter to illustrate something in Java. I complied these notes at the time of version 3.0.83 and to illustrate this page, that version must be used for accuracy.

To install and use this wonderful tool, look for the download link. You get a zip file to explode, then copy the style and scripts subdirectories to the main subdirectory of your web content so that the filesystem references below, for example, src="scripts/shCore.js", are accurate respective to the location of the HTML file that's hoping for it.

This is how I do it today; my usage has evolved over the years. 

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
  <title> My Code Sample </title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">

  <!-- Here's the Syntax Highlighting section... -->
  <link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
  <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
  <script type="text/javascript" src="scripts/shCore.js"></script>
  <script type="text/javascript" src="scripts/shBrushXml.js"></script>
  <script type="text/javascript">
    SyntaxHighlighter.defaults['gutter'] = false;
    SyntaxHighlighter.defaults['toolbar'] = true;
    SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
    SyntaxHighlighter.all();
  </script>
</head>


<!-- Here's how to decorate a pre-formatted section of Java code for highlighting... -->
<pre style="font-size: small;"><pre class="brush: java;">
         .
         .
         .
  (Java code here...)
         .
         .
         .
</pre></pre>


</body>
</html>

You can tailor various aspects, some like the Toolbox and borders have disappeared. Gutter toggles line numbering. Auto-links toggles off recognizing a hyper link. First-line allows to specify what line number to start with. Etc. There are a lot of choices. 

<pre class="brush: java; gutter: false; auto-links: false; first-line: 1">

To fix up line highlighting alternation, open up theme, e.g.: styles/shThemeEclipse.css, look for .line.alt2 and change it to your favorite background color. If you don't do this, the background of all lines is just white by default. 

.syntaxhighlighter .line.alt2 {
  /*background-color: white !important;*/
  background-color: #f2f2f2 !important;
  /*background-color: #D4DDF8 !important; --periwinkle (blue)*/
}

To get a bottom margin and border, find the .syntaxhighlighter section and change to add two more lines as below. However, this mostly avoids the <pre> section code sample from sitting right on top of subsequent HTML content, not always a problem. 

.syntaxhighlighter {
  background-color: white !important;
  border; 1px solid #DADAD9 !important;
  margin-bottom: 20px !important;
}

To add a border around the code sample, add this to that same section. If you don't do this, the code sample won't be set up as prominently (which could very well be your preference). 

.syntaxhighlighter {
  background-color: white !important;
  border: 1px solid grey !important;
}

Eclipse IDE default theme:

This is how to highlight specific lines in the paragraph: The syntax below, in bold, will produce a darker grey background color for each line listed. 

<pre class="brush: xml; highlight [3, 6, 18]">