Syntax highlighting Source files
sstk
application that would allow source files to be syntax highlighted.
This project seems to be geared towards providing exactly that
functionality
http://qbnz.com/highlighter/index.php
Staffan Olsson
>
> Is it possible to have some sort of filter integrated into the
> application that would allow source files to be syntax highlighted.
>
document viewer in Repos Style, so it would be a major change. When
you click a file link Apache sends the contents with autodetected MIME
type, usually text/plain, which makes the browser display it as plain
boring black and white text.
I would implement syntax highligting by adding a javascript to <head>
in repos.xsl. The javascript would identify files ending with
.php|java|et.al. and make those links open a dialog that uses a
syntaxhighlighting tool. I've used
http://code.google.com/p/syntaxhighlighter/ in a different project and
it is simple enough. Adding this kind of behavior to existing HTML is
usually easy with a library like jQuery.
> This project seems to be geared towards providing exactly that
> functionality
> http://qbnz.com/highlighter/index.php
Yes, there should be many libraries like this.
Once a javascript like this is written it can be an optional component
to Repos Style. The intent of the project was originally to make the
SVN listing prettier. We have avoided javascript so far, except in the
proposed multi-repo solution. If someone wants to implement a viewer
script with sytnax highlighting, I'd be happy to add it to the
download page and the source tree.
/Staffan
sstk
with repos-style-2.0b1
This is my first JS/XSLT page so please bear with me.
- To get it to work, extract the /Scripts and /Style directory from
syntaxhighlighter into the repos-web/view directory.
- edit repos.xsl and add the following :
- in the repos style configuration section add the following
parameter
<xsl:param name="syntaxviewUrl"><xsl:value-of select="$static"/
>view/syntaxview.html</xsl:param>
- in the template match="file" section
change the href for open (and the file link) to
<a id="open:{$id}" class="action" href="{$syntaxviewUrl}?p=https://
<<servername>>/<<reponame>>/{../@path}/
{@href}&t={$filetype}">open</a>
couple of things to note here: I was not able to figure out how to get
https://<<servername>>/<<reponame>>/{../@path}/ populated dynamically.
Obviously this should be a parameter we read from.
Basically all we are doing here is passing to the syntaxview.html file
2 parameters ( 'p' : <<full file path to the source file you want to
see>>, 't' : <<filetype: for the syntax highlighter to figure out how
to deal with it>>)
Finally copy the following syntaxview.html into the same directory :
<html>
<head>
<link type="text/css" rel="stylesheet" href="Styles/
SyntaxHighlighter.css"></link>
<script language="javascript" src="Scripts/shCore.js" ></script>
<script language="javascript" src="Scripts/shBrushCpp.js" ></script>
<script language="javascript" src="Scripts/shBrushCSharp.js" ></
script>
<script language="javascript" src="Scripts/shBrushCss.js" ></script>
<script language="javascript" src="Scripts/shBrushDelphi.js" ></
script>
<script language="javascript" src="Scripts/shBrushJava.js" ></script>
<script language="javascript" src="Scripts/shBrushJScript.js" ></
script>
<script language="javascript" src="Scripts/shBrushPhp.js" ></script>
<script language="javascript" src="Scripts/shBrushPython.js" ></
script>
<script language="javascript" src="Scripts/shBrushRuby.js" ></script>
<script language="javascript" src="Scripts/shBrushSql.js" ></script>
<script language="javascript" src="Scripts/shBrushVb.js" ></script>
<script language="javascript" src="Scripts/shBrushXml.js" ></script>
<script language="javascript" type="text/javascript">
var req;
function loadSourceFile(url)
{
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req)
{
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
function loadSyntax()
{
dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
function processReqChange()
{
// only if req shows "complete"
if (req.readyState == 4)
{
// only if "OK"
if (req.status == 200)
{
document.getElementById('T1').innerHTML=req.responseText;
document.getElementById('T1').class=getParam('t');
loadSyntax();
} else
{
alert("There was a problem retrieving the data:" +
req.statusText);
}
}
}
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
</head>
<body onload="loadSourceFile(getParam('p'))">
<textarea id="T1" name="code" class="vb" cols="100" rows="110" />
</script>
</body> </html>
---
Somethings I don't understand, if I try to open any source file >2K
lines (yeah don't ask!), it takes a LONG time, first to download the
file with xmlhttprequest, and then to format it with
syntaxhighlighter.
anyway if someone can figure out how to get the base url dynamically
within the xsl file please do let me know.
On Sep 3, 10:03 am, "Staffan Olsson" <sols...@gmail.com> wrote:
>
> > Is it possible to have some sort of filter integrated into the
> > application that would allow source files to be syntax highlighted.
>
> Yes, with software anything is possible :) However there is no
> document viewer in Repos Style, so it would be a major change. When
> you click a file link Apache sends the contents with autodetected MIME
> type, usually text/plain, which makes the browser display it as plain
> boring black and white text.
>
> I would implement syntax highligting by adding a javascript to <head>
> in repos.xsl. The javascript would identify files ending with
> .php|java|et.al. and make those links open a dialog that uses a
Staffan Olsson
I didn't have time to test it yet but I might have some input anyway.
On Tue, Sep 30, 2008 at 12:51 AM, sstk <shinys...@gmail.com> wrote:
>
> I've added in some functionality to use http://code.google.com/p/syntaxhighlighter/
> with repos-style-2.0b1
>
> This is my first JS/XSLT page so please bear with me.
> - To get it to work, extract the /Scripts and /Style directory from
> syntaxhighlighter into the repos-web/view directory.
>
> - edit repos.xsl and add the following :
> - in the repos style configuration section add the following
> parameter
> <xsl:param name="syntaxviewUrl"><xsl:value-of select="$static"/
>>view/syntaxview.html</xsl:param>
> - in the template match="file" section
> change the href for open (and the file link) to
> <a id="open:{$id}" class="action" href="{$syntaxviewUrl}?p=https://
> <<servername>>/<<reponame>>/{../@path}/
> {@href}&t={$filetype}">open</a>
>
> couple of things to note here: I was not able to figure out how to get
> https://<<servername>>/<<reponame>>/{../@path}/ populated dynamically.
> Obviously this should be a parameter we read from.
Through browser independent XSLT it is not possible to get current URL
or repository root URL.
> Basically all we are doing here is passing to the syntaxview.html file
> 2 parameters ( 'p' : <<full file path to the source file you want to
> see>>, 't' : <<filetype: for the syntax highlighter to figure out how
> to deal with it>>)
>
> Finally copy the following syntaxview.html into the same directory :
(see original mail)
>
> Somethings I don't understand, if I try to open any source file >2K
> lines (yeah don't ask!), it takes a LONG time, first to download the
> file with xmlhttprequest, and then to format it with
> syntaxhighlighter.
XMLHttpRequest is usually as fast as any page load, so that shouldn't
be a problem. Syntaxhighlighter is probably slow (I guess it is
because traversing and coloring text in javascript is slow). You could
use Firebug (http://getfirebug.com/) to profile javascripts.
>
> anyway if someone can figure out how to get the base url dynamically
> within the xsl file please do let me know.
>
This would require javascript in the xslt. The "open" hrefs could
probably be updated in body onload after inspecting
window.location.href. Or syntaxview.html could use referrer as
discussed in the multi-repo threads (document.referrer in javascript).
I like this solution because it is quite non-intrusive with the actual
highlighting is in an external html file. Maybe instead of modifying
the "open" button there could be a new "view" button, wrapped in
<xsl:if test="$syntaxviewUrl">. That way it would be a matter of
editing the config section of the xslt to switch highlighting on and
off.
/Staffan
sstk
> XMLHttpRequest is usually as fast as any page load, so that shouldn't
> be a problem. Syntaxhighlighter is probably slow (I guess it is
> because traversing and coloring text in javascript is slow). You could
> use Firebug (http://getfirebug.com/) to profile javascripts.
>
worse atleast on my browser if the file is >3K doesn't even show the
entire file correctly.
since the syntaxview.html is pretty pluggable atsome point i'll try to
use http://qbnz.com/highlighter/index.php and see if its any better.
> I like this solution because it is quite non-intrusive with the actual
> highlighting is in an external html file. Maybe instead of modifying
> the "open" button there could be a new "view" button, wrapped in
> <xsl:if test="$syntaxviewUrl">. That way it would be a matter of
> editing the config section of the xslt to switch highlighting on and
> off.
the file with syntaxview.html,
and have added the document.referrer to the url in syntaxview.html to
load the file dynamically.
Couple of things I might try (if anyone else is interested let me
know):
- add a progress bar to syntaxview.html to show progress while a large
file loads
- plug in a different syntax highlighter application
- implement svn blame (suggestions on how would be nice)
Here are the files again :
-------- repos.xsl ---------
-- add this line to the config header
-- add this line to the template match="file section (under div
class="actions")
--------------
-------- syntaxview.html -------
<head>
<link type="text/css" rel="stylesheet" href="Styles/
SyntaxHighlighter.css"></link>
<script language="javascript" src="Scripts/shCore.js" ></script>
<script language="javascript" src="Scripts/shBrushCpp.js" ></script>
<script language="javascript" src="Scripts/shBrushCSharp.js" ></
script>
<script language="javascript" src="Scripts/shBrushCss.js" ></script>
<script language="javascript" src="Scripts/shBrushDelphi.js" ></
script>
<script language="javascript" src="Scripts/shBrushJava.js" ></script>
<script language="javascript" src="Scripts/shBrushJScript.js" ></
script>
<script language="javascript" src="Scripts/shBrushPhp.js" ></script>
<script language="javascript" src="Scripts/shBrushPython.js" ></
script>
<script language="javascript" src="Scripts/shBrushRuby.js" ></script>
<script language="javascript" src="Scripts/shBrushSql.js" ></script>
<script language="javascript" src="Scripts/shBrushVb.js" ></script>
<script language="javascript" src="Scripts/shBrushXml.js" ></script>
<script language="javascript" type="text/javascript">
var req;
function loadSourceFile(url)
{
url = document.referrer + url;
</script>
</body> </html>
---------------
Kazar
link changed from the actual file, to a php script (with the actual
filename as a parameter). That php script got the file via command-
line svn, and piped it through the geshi highlighting tool. Works no
problems. If anyone is interested in the code, say so, and I'll
upload the necessary code.
On Sep 30, 9:22 pm, sstk <shinystart...@gmail.com> wrote:
> > XMLHttpRequest is usually as fast as any page load, so that shouldn't
> > be a problem. Syntaxhighlighter is probably slow (I guess it is
> > because traversing and coloring text in javascript is slow). You could
> > use Firebug (http://getfirebug.com/) to profile javascripts.
>
> yep seems like syntaxhighlighter is the one causing problems. it gets
> worse atleast on my browser if the file is >3K doesn't even show the
> entire file correctly.
> since the syntaxview.html is pretty pluggable atsome point i'll try to
Staffan Olsson
>
> Personally, the way I solved this was to modify the xslt so a file
> link changed from the actual file, to a php script (with the actual
> filename as a parameter). That php script got the file via command-
> line svn, and piped it through the geshi highlighting tool. Works no
> problems. If anyone is interested in the code, say so, and I'll
> upload the necessary code.
>
It sounds robust. How do you download files now?
/Staffan
Kazar
the file section, overriding the default of actually showing the
file. If you type the file url into a browser as normal, it'll still
work.
For example,
"https://reposerver.com/repo/trunk/template_processor/
class.TemplateProcessor.php" would still load the file normally, so
all the svn client stuff would work as normal, but when you are
browsing through the repository via reposstyle, the link to that file
would look like "https://reposerver.com/open/highlight.php?target=/
trunk/template_processor/class.TemplateProcessor.php", assuming that
the open folder is where you also keep the log file. When you click
on that link, you see the highlighted content.
On Nov 21, 7:11 am, "Staffan Olsson" <sols...@gmail.com> wrote: