Fossil SCM

SHJS Syntax Highlighter JavaScript

Installing

1. cd in a open repository e.g. fossil
2. mkdir ext
3. Download shjs

1. Download jQuery

1. fossil ui
2. point your browser at localhost:8080
3. Choose Admin-->Header and add above </head> the following lines:

<th1>
set base "/doc/ckout/ext"
set shbase "$base/shjs-0.6"
</th1>
<script>
var web_page = "$<current_page>";
var shbase = "$<shbase>";
</script>
<script type="text/javascript" src="$base/jquery-1.6.min.js"></script>
<th1>
if { "artifact" eq $current_page || "fdiff"  eq $current_page } {
html "<link href='$shbase/css/sh_vim-dark.css' rel='stylesheet' type='text/css' />\n"
html "<script type='text/javascript' src='$shbase/sh_main.js'></script>\n"
html "<script type='text/javascript' src='$base/syn.js'></script>\n"
} else {
html "<script>function synlite(){}</script>\n"
}
</th1>
<script>
 $(document).ready(function(){
   synlite();
 });
</script>

1. copy the lines below to ext/syn.js

function synlite(){
    var t = '';
    if("fdiff" == web_page){
        t ="diff";
    } else {
       var file = $("blockquote p a:first-child").text();
       var dotAt = file.lastIndexOf(".");
       var ext;
       if(dotAt){
           ext = file.substr(dotAt+1);
           if(ext.length){
               switch(ext){
                   case "tex":
                       t = "latex";
                       break;
                   case "y":
                       t = "bison";
                       break;
                   case "dia":
                       t = "xml";
                       break;
                   case "wiki":
                       t = "html";
                       break;
                   case "l":
                       t = "flex";
                       break;
                   case "test":
                       t = "tcl";
                       break;
                   case "h":
                       t = "c";
                       break;
                    default:
                       t = ext;
                       break;
               }
            } 
        }
    }
    if(t.length){
        $("blockquote pre").addClass("sh_"+t);
        sh_highlightDocument(shbase+'/lang/','.js');
    }
}

1. Done syntax highligthing should work now.

explanation added header lines

1. <th1>
2. set base "/doc/ckout/ext"
3. set shbase "$base/shjs-0.6"
4. </th1>

Handy short cuts. If you want to make it permanent add ext to your repo and change ckout to tip!

1.  
2. <script>
3. var web_page = "$<current_page>";
4. var shbase = "$<shbase>";
5. </script>

Communicate these vars to the client. We need them in syn.js!

1. <script type="text/javascript" src="$base/jquery-1.6.min.js"></script>

we always load jquery. Because we use the ready function.

1.  
2. <th1>
3. if { "artifact" eq $current_page || "fdiff" eq $current_page } {

Only do syntax higlight on fdiff and artifact! Unfortunate the unified diff isn't highlighted correct!

1. html "<link href='$shbase/css/sh_vim-dark.css' rel='stylesheet' type='text/css' />\n"

Not pretty but it stands out, so no doubt that highlighting is working. Change to your liking.

1. html "<script type='text/javascript' src='$shbase/sh_main.js'></script>\n"
2. html "<script type='text/javascript' src='$base/syn.js'></script>\n"

The glue between the page and shjs. See below for explanation

1. } else {
2. html "<script>function synlite(){}</script>\n"
3. }

synlite() is always defined! So the ready function will always execute

1. </th1>

1. <script>
2. $(document).ready(function(){
3. synlite();
4. });
5. </script>

The ready function will execute when the whole page is loaded.

Explanation synlite function

1. function synlite(){
2.   var t = '';

If the fdiff page is choosen when we want to load sh_diff.js and the pre needs to have the class "sh_diff"

1.   if("fdiff" == web_page){
2.     t ="diff";
3.   } else {

We need to look-up the file. Extract the extension and map the extension to a type t. e.g. the extension yacc should map to type bison. If no ma then it is hoped that the extension maps to a syntaxt file. e.g. The extension sh maps to sh_sh.js and class sh_sh

1.     var file = $("blockquote p a:first-child").text();
2.     var dotAt = file.lastIndexOf(".");
3.     var ext;
4.     if(dotAt){
5.       ext = file.substr(dotAt+1);
6.       if(ext.length){
7.         switch(ext){
8.           case "tex":
9.             t = "latex";
10.             break;
11.           case "y":
12.             t = "bison";
13.             break;
14.           case "dia":
15.             t = "xml";
16.             break;
17.           case "wiki":
18.             t = "html";
19.             break;
20.           case "l":
21.             t = "flex";
22.             break;
23.           case "test":

test in fossil are tcl files. In an other repsitory this could be something entirely dfferent!

1.             t = "tcl";
2.             break;
3.           case "h":
4.             t = "c";
5.             break;
6.           default:
7.             t = ext;
8.             break;
9.         }
10.       }
11.     }
12.   }
13.   if(t.length){

Only if we have a type we are going to try highlighting

1.     $("blockquote pre").addClass("sh_"+t);
2.     sh_highlightDocument(shbase+'/lang/','.js');
3.   }
4. }

// var file = $("blockquote p a:first-child").text();
var file = $("div ul li a:first-child").html();