SyntaxHighlighter is a JavaScript tool for dynamically adding syntax highlights to code displayed on web pages. This blog post will show you how to apply code highlighting to OpenInsight Basic+ code using SyntaxHighlighter and a custom plugin from the SyntaxHighlighterForOpenInsight GitHub project.

1. Create a working folder. In this example we'll use shbasicplusexample as our working folder.
    
2. Download SyntaxHighlighter and extract it to the local working folder. As of this posting date the current file is syntaxhighlighter_3.0.83.zip and our example working folder path after extraction is shbasicplusexample\syntaxhighlighter_3.0.83\
    
3. Download the custom plugin files from the SyntaxHighlighterForOpenInsight GitHub project and extract them into a temporary folder. I.e. shbasicplusexample\SyntaxHighlighterForOpenInsight-master
    
4. Copy the following files and folders from shbasicplusexample\SyntaxHighlighterForOpenInsight-master\ into shbasicplusexample\syntaxhighlighter_3.0.83\
    
5. Open shbasicplusexample\syntaxhighlighter_3.0.83\oibp_test.html in a web browser to verify the plugin files are formatting the example code.

If everything is working properly instead of seeing this in oibp_test.html:

Subroutine TEST_OIBPSH(params)
Declare Function rti_cdomail
  
*Sample comment
sendername      = '[email protected]' ;* End of line comment
 
mvVar<1> = 'Value 1'
mvVar<2> = 'text marked' : @TM : 'variable value'
 
/* 
more code to follow
after multi-line comment 
*/
 
return sendername

You should see:

Subroutine TEST_OIBPSH(params)
Declare Function rti_cdomail
 
*Sample comment
sendername      = '[email protected]' ;* End of line comment

mvVar<1> = 'Value 1'
mvVar<2> = 'text marked' : @TM : 'variable value'

/* 
more code to follow
after multi-line comment 
*/

return sendername

Under The Hood

The custom plugin files from GitHub are javascript and css files that define the syntax and colors for highlighting BasicPlus code. The files integrate into all SytnaxHighlighter examples by adding two lines to the HTML head tag:

<script type="text/javascript" src="oibp_custom/shBrushBasicPlus.js"></script>
<link type="text/css" rel="stylesheet" href="oibp_custom/shCoreBasicPlus.css"/>

Any text wrapped in the tag <pre class="brush: basicplus;"> and </pre> will be formatted as BasicPlus source code. The class style basicplus defines SyntaxHighlighter should use the custom plugin when formatting the code.

Important: Any code wrapped in the PRE tags should be HTML escaped to protect reserved characters. An HTML Encoder can quickly convert any characters such as < and > into &lt; and &gt; just by copying and pasting. The SyntaxHighlighter installation instructions contain more information and other options for dealing with this behavior.