Fossil

Artifact Content
Login

Artifact 4001d628e4f7f9ec9279c6ba2fd586d6fa4ff919:

Wiki page [shjs] by anonymous 2014-11-26 15:39:13.
D 2014-11-26T15:39:13.833
L shjs
P 75279c73ab791f4291f31a0f5652ee575fefbd99
U anonymous
W 8396
<h2>SHJS Syntax Highlighter JavaScript</h2>
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.

<h3>Installing</h3>

  #  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 &lt;/head&gt; the following lines:
<pre>
&lt;th1&gt;
set base "/doc/ckout/ext"
set shbase "$base/shjs-0.6"
&lt;/th1&gt;
&lt;script&gt;
var web_page = "$&lt;current_page&gt;";
var shbase = "$&lt;shbase&gt;";
&lt;/script&gt;
&lt;script type="text/javascript" src="$base/jquery-1.6.min.js"&gt;&lt;/script&gt;
&lt;th1&gt;
if { "artifact" eq $current_page || "fdiff"  eq $current_page } {
html "&lt;link href='$shbase/css/sh_vim-dark.css' rel='stylesheet' type='text/css' /&gt;\n"
html "&lt;script type='text/javascript' src='$shbase/sh_main.js'&gt;&lt;/script&gt;\n"
html "&lt;script type='text/javascript' src='$base/syn.js'&gt;&lt;/script&gt;\n"
} else {
html "&lt;script&gt;function synlite(){}&lt;/script&gt;\n"
}
&lt;/th1&gt;
&lt;script&gt;
 $(document).ready(function(){
   synlite();
 });
&lt;/script&gt;
</pre>
  #  copy the lines below to ext/syn.js
<pre>
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');
    }
}
</pre>
  #  Done syntax highligthing should work now.


<h3>explanation added header lines</h3>


  #  &lt;th1&gt;
  #  set base "/doc/ckout/ext"
  #  set shbase "$base/shjs-0.6"
  #  &lt;/th1&gt;
<p>Handy short cuts. If you want to make it permanent add ext to your repo and change
ckout to tip!</p>
  #  &nbsp;
  #  &lt;script&gt;
  #  var web_page = "$&lt;current_page&gt;";
  #  var shbase = "$&lt;shbase&gt;";
  #  &lt;/script&gt;
<p>Communicate these vars to the client. We need them in syn.js!</p>
  #  &lt;script type="text/javascript" src="$base/jquery-1.6.min.js"&gt;&lt;/script&gt;
<p>we always load jquery. Because we use the ready function.</p>
  #  &nbsp;
  #  &lt;th1&gt;
  #  if { "artifact" eq $current_page || "fdiff"  eq $current_page } {
<p>Only do syntax higlight on fdiff and artifact! Unfortunate the unified diff isn't
highlighted correct!</p>
  #  html "&lt;link href='$shbase/css/sh_vim-dark.css' rel='stylesheet' type='text/css' /&gt;\n"
<p>Not pretty but it stands  out, so no doubt that highlighting is working. Change to your liking. </p>
  #  html "&lt;script type='text/javascript' src='$shbase/sh_main.js'&gt;&lt;/script&gt;\n"
  #  html "&lt;script type='text/javascript' src='$base/syn.js'&gt;&lt;/script&gt;\n"
<p>The glue between the page and shjs. See below for explanation</p>
  #  } else {
  #  html "&lt;script&gt;function synlite(){}&lt;/script&gt;\n"
  #  }
<p>synlite() is always defined! So the ready function will always execute</p>
  #  &lt;/th1&gt;
  #  
  #  &lt;script&gt;
  #   $(document).ready(function(){
  #     synlite();
  #   });
  #  &lt;/script&gt;
<p>The ready function will execute when the whole page is loaded.</p>

<h3>Explanation synlite function</h3>
  #  function synlite(){
  #  &nbsp;&nbsp;var t = '';
<p>If the fdiff page is choosen when we want to load sh_diff.js and the pre needs to 
have the class "sh_diff"</p>
  #  &nbsp;&nbsp;if("fdiff" == web_page){
  #  &nbsp;&nbsp;&nbsp;&nbsp;t ="diff";
  #  &nbsp;&nbsp;} else {
<p>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</p>
  #  &nbsp;&nbsp;&nbsp; var file = $("blockquote p a:first-child").text();
  #  &nbsp;&nbsp;&nbsp; var dotAt = file.lastIndexOf(".");
  #  &nbsp;&nbsp;&nbsp; var ext;
  #  &nbsp;&nbsp;&nbsp; if(dotAt){
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ext = file.substr(dotAt+1);
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(ext.length){
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; switch(ext){
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case "tex":
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t = "latex";
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case "y":
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t = "bison";
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case "dia":
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t = "xml";
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case "wiki":
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t = "html";
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case "l":
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t = "flex";
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case "test":
<p>test in fossil are tcl files. In an other repsitory this could be
something entirely dfferent!</p>
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t = "tcl";
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case "h":
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t = "c";
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t = ext;
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
  #  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
  #  &nbsp;&nbsp;&nbsp;&nbsp;}
  #  &nbsp;&nbsp;}
  #  &nbsp;&nbsp;if(t.length){
<p>Only if we have a type we are going to try highlighting</p>
  #  &nbsp;&nbsp;&nbsp;&nbsp;$("blockquote pre").addClass("sh_"+t);
  #  &nbsp;&nbsp;&nbsp;&nbsp;sh_highlightDocument(shbase+'/lang/','.js');
  #  &nbsp;&nbsp;}
  #  }


<hr><div id="48cb630e8aa325fb"><i>On 2014-11-26 15:39:13 UTC anonymous (claiming to be Johan Kuuse) added:</i><br />
Hi,

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

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

BR,
Johan</div id="48cb630e8aa325fb">
Z 020c2257a2987e122ac307b2c6e33a54