Read part one here : Syntax Highlighter Part One
Ok, here is a screen snippet of what our test2.html page looks like when rendered by a browser. Notice each color fragment has it’s code keywords colored according to the language of the fragment. Also note that the ‘Midnight’ theme is used for all code fragment displays. Click to grow.
Code Fragment Test Page
Image of Example Folder Layout
Here is my test folder with a ‘styles’ sub-folder for the test2.html file. The HTML for our example test page follows. As Alex explains in his installation page, there are two approaches to markup of code fragments :
- Use the html <pre> tag
- Use the html <script> tag witha CDATA extension
Again, there are several javascript files we need to declare in our test2.html page. A core j/s file with overall logic plus three j/s brushes for the three code fragments, each in a different programming language.
For overall color control, five CSS files declare 1) the core colors 2) a theme default if no override theme has been chosen and 3) in this case we do use an overriding theme called ‘Midnight’. There are several other themes you can try.
Points to note in the following html document – both styles of highlighting are used. The <pre> element needs a class declaration for the brush (programming language) contained within the fragment. You can see class=’brush: groovy’ in the first fragment to color groovy keywords. The <script type=”syntaxhighlighter” class=”brush: js”><![CDATA[ declaration is the alternative approach to present code fragments. We can place any < or > characters within the CDATA of a script declaration otherwise if we use the pre approach, we need to manually change each < and > for their < and > equivalents.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="./styles/shCore.css" type="text/css" />
<link rel="stylesheet" href="./styles/shCoreDefault.css" type="text/css" />
<link rel="stylesheet" href="./styles/shCoreMidnight.css" type="text/css" />
<link rel="stylesheet" href="./styles/shThemeDefault.css" type="text/css" />
<link rel="stylesheet" href="./styles/shThemeMidnight.css" type="text/css" />
<title>Technology Page To Check Muliple Column text Features</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="./scripts/shCore.js"></script>
<script type="text/javascript" src="./scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="./scripts/shBrushJava.js"></script>
<script type="text/javascript" src="./scripts/shBrushGroovy.js"></script>
</head>
<body >
<h2>Code Examples Using Midnight Theme</h2>
<div><h3>Groovy Code Fragment</h3>
<p>
<pre class='brush: groovy'>
println 'Hi kids'
def cats=[]
cats.each{cat -> println cat}
</pre>
</p></div>
<h3>Javascript Code Fragment</h3>
<p>
<script type=”syntaxhighlighter” class=”brush: js”><![CDATA[
var setArray = function(elems) {
this.length = 0;
push.apply(this, elems);
return this;
}
]]></script>
</p>
<h3>Java Code Fragment</h3>
<script type=”syntaxhighlighter” class=”brush: java”><![CDATA[
// require(url:'https://scripting.dev.java.net', jar:'groovy-engine.jar')
// this runs in groovy 1.8 using java 1.6 to run the script engine
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
public class CalcMain {
public static void main(String[] args) throws Exception {
System.out.println(“Starting …”);
ScriptEngineManager factory = new ScriptEngineManager();
ScriptEngine engine = factory.getEngineByName(“groovy”);
// basic example
System.out.println(engine.eval(“(1..10).sum()”));
// example showing scripting variables
engine.put(“first”, “HELLO”);
engine.put(“second”, “world”);
System.out.println(engine.eval(“first.toLowerCase() + second.toUpperCase()”));
System.out.println(“Ending …”);
}
}
]]></script>
</p>
<script type=”text/javascript”>
$(document).ready(function()
{
SyntaxHighlighter.highlight();
});
</script>
</body>
</html>
Finally, look at the bottom of the html to see how we invoke syntax highlighter. We can invoke it only after the page has loaded completely. Here is a nice use of JQuery as it has a convenient function of $(document).ready(); which is called upon page load completion. It's a nice place to insert our call to fire up the highlighter engine. Copy the code above into a textfile named test2.html and then use your favorite browser to open this file. If you've done it all correctly, you'll be rewarded with a display like the screen snippet shown at the top of this post.
It look quite a while to figure out all these bits and pieces. The website documentation is sparse hence a steep lerning curve. Hope this helps you a bit. 
