Code Fragment Syntax Highlighter – Part Two

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
Code Fragment Test Page

Image of Example Folder Layout
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 :

  1. Use the html <pre> tag
  2. 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 &lt; and &gt; equivalents.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html class="no-js">
<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='' 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>
<body >
<h2>Code Examples Using Midnight Theme</h2>
<div><h3>Groovy Code Fragment</h3>
<pre class='brush: groovy'>
println 'Hi kids'
def cats=[]
cats.each{cat -> println cat}
<h3>Javascript Code Fragment</h3>
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
var setArray = function(elems) {
this.length = 0;
push.apply(this, elems);
return this;

<h3>Java Code Fragment</h3>

<script type="syntaxhighlighter" class="brush: java"><![CDATA[
// require(url:'', 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

// 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 type="text/javascript">

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. 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s