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 </head> the following lines:
<pre>
<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>
</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>
# <th1>
# set base "/doc/ckout/ext"
# set shbase "$base/shjs-0.6"
# </th1>
<p>Handy short cuts. If you want to make it permanent add ext to your repo and change
ckout to tip!</p>
#
# <script>
# var web_page = "$<current_page>";
# var shbase = "$<shbase>";
# </script>
<p>Communicate these vars to the client. We need them in syn.js!</p>
# <script type="text/javascript" src="$base/jquery-1.6.min.js"></script>
<p>we always load jquery. Because we use the ready function.</p>
#
# <th1>
# 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 "<link href='$shbase/css/sh_vim-dark.css' rel='stylesheet' type='text/css' />\n"
<p>Not pretty but it stands out, so no doubt that highlighting is working. Change to your liking. </p>
# html "<script type='text/javascript' src='$shbase/sh_main.js'></script>\n"
# html "<script type='text/javascript' src='$base/syn.js'></script>\n"
<p>The glue between the page and shjs. See below for explanation</p>
# } else {
# html "<script>function synlite(){}</script>\n"
# }
<p>synlite() is always defined! So the ready function will always execute</p>
# </th1>
#
# <script>
# $(document).ready(function(){
# synlite();
# });
# </script>
<p>The ready function will execute when the whole page is loaded.</p>
<h3>Explanation synlite function</h3>
# function synlite(){
# 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>
# if("fdiff" == web_page){
# t ="diff";
# } 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>
# 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":
<p>test in fossil are tcl files. In an other repsitory this could be
something entirely dfferent!</p>
# t = "tcl";
# break;
# case "h":
# t = "c";
# break;
# default:
# t = ext;
# break;
# }
# }
# }
# }
# if(t.length){
<p>Only if we have a type we are going to try highlighting</p>
# $("blockquote pre").addClass("sh_"+t);
# sh_highlightDocument(shbase+'/lang/','.js');
# }
# }
<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