Fossil

shjs
Login

shjs

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

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

On 2014-11-26 15:39:13 UTC anonymous (claiming to be Johan Kuuse) added:
Hi,

I had to modify the following line in syn.js to make it work:

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

BR, Johan