D 2011-05-12T23:34:55.378 L shjs U renez W 8050

SHJS Syntax Highlighter JavaScript

This shjs supports more languages than the others I have seen. We are not going to add anything to the repository because we use /doc/ckout. This means you can try it out without committing to the repository.

Installing

# cd in a open repository e.g. fossil # mkdir ext # Download shjs [http://downloads.sourceforge.net/project/shjs/shjs/0.6/shjs-0.6.zip?r=http%3A%2F%2Fsourceforge.net%2Fprojects%2Fshjs%2F&ts=1305239063 | shjs-0.6.zip]. Unzip in ext # Download jQuery From [http://code.jquery.com/jquery-1.6.min.js | jquery-1.6.min.js ]. Put it also in ext. # fossil ui # point your browser at localhost:8080 # 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>
# 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');
    }
}
# Done syntax highligthing should work now.

explanation added header lines

# <th1> # set base "/doc/ckout/ext" # set shbase "$base/shjs-0.6" # </th1>

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

#   # <script> # var web_page = "$<current_page>"; # var shbase = "$<shbase>"; # </script>

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

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

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

#   # <th1> # 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!

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

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

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

# } else { # html "<script>function synlite(){}</script>\n" # }

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

# </th1> # # <script> # $(document).ready(function(){ # synlite(); # }); # </script>

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

Explanation synlite function

# function synlite(){ #   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"

#   if("fdiff" == web_page){ #     t ="diff"; #   } 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

#     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":

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

#             t = "tcl"; #             break; #           case "h": #             t = "c"; #             break; #           default: #             t = ext; #             break; #         } #       } #     } #   } #   if(t.length){

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

#     $("blockquote pre").addClass("sh_"+t); #     sh_highlightDocument(shbase+'/lang/','.js'); #   } # } Z a57dc4dd1058264ca6517b1639acf83f