SHJS Syntax Highlighter JavaScript

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

1. cd in a open repository e.g. fossil
2. mkdir ext
3. Download shjs shjs-0.6.zip. Unzip in ext
4. Download jQuery From jquery-1.6.min.js . Put it also in ext.
5. fossil ui
6. point your browser at localhost:8080
7. 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>
   

8. 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');
       }
   }
   

9. 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!

5.  
6. <script>
7. var web_page = "$<current_page>";
8. var shbase = "$<shbase>";
9. </script>

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

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

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

11.  
12. <th1>
13. 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!

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

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

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

17. } else {
18. html "<script>function synlite(){}</script>\n"
19. }

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

20. </th1> #
21. <script>
22. $(document).ready(function(){
23. synlite();
24. });
25. </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"

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

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

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

29.             t = "tcl";
30.             break;
31.           case "h":
32.             t = "c";
33.             break;
34.           default:
35.             t = ext;
36.             break;
37.         }
38.       }
39.     }
40.   }
41.   if(t.length){

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

42.     $("blockquote pre").addClass("sh_"+t);
43.     sh_highlightDocument(shbase+'/lang/','.js');
44.   }
45. }

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