Kodify - New Syntax Highlighter
Posted: Sat Jan 10, 2009 3:38 am
Addendum: I've now added bracket pairing... visible in the demo
Just thought I'd share something I've been working on and off for a while, that's now finished
It's a syntax highlighter with a difference. I can't stand the markup that syntax highlighters generate (bloated and non-semantic). What my version, Kodify does is operates on the client side as a simple progressive enhancement using JavaScript.
If you have JS turned off then you see the source code just fine. If you have JS turned on then you get a colorful version of the source code. Simple.
The other thing the Kodify does differently is that it fully lexically scan the code. I mean, it doesn't just use a big regex which is very slow and limiting... instead it uses a lexical analzyer routine based on C's lex.
It's finished in the sense that the engine and the lexical analyzer (another project of mine) is built... it just needs a whole heap of language specifications adding (community effort would be nice, since I don't know all languages!).
I just threw together the JS language specification to show off what it does.
I haven't optimized it heavily (yet) but it's still reallly fast due to the lexical analysis routine it uses (say 11,000 bytes of source in under 100ms).
It binds to code blocks identified with the "kodify" class name along with the language (e.g. <pre class="kodify js">).
I will make it do a generic highlight (strings and comments) for unspecified languages.
I've tested this on the following browsers:
http://w3style.co.uk/~d11wtq/kodify/demo/
Anybody likely to use this once I add support for lots of other languages and create new themes?
Things is definitely WILL add:
Just thought I'd share something I've been working on and off for a while, that's now finished
It's a syntax highlighter with a difference. I can't stand the markup that syntax highlighters generate (bloated and non-semantic). What my version, Kodify does is operates on the client side as a simple progressive enhancement using JavaScript.
If you have JS turned off then you see the source code just fine. If you have JS turned on then you get a colorful version of the source code. Simple.
The other thing the Kodify does differently is that it fully lexically scan the code. I mean, it doesn't just use a big regex which is very slow and limiting... instead it uses a lexical analzyer routine based on C's lex.
It's finished in the sense that the engine and the lexical analyzer (another project of mine) is built... it just needs a whole heap of language specifications adding (community effort would be nice, since I don't know all languages!).
I just threw together the JS language specification to show off what it does.
I haven't optimized it heavily (yet) but it's still reallly fast due to the lexical analysis routine it uses (say 11,000 bytes of source in under 100ms).
It binds to code blocks identified with the "kodify" class name along with the language (e.g. <pre class="kodify js">).
I will make it do a generic highlight (strings and comments) for unspecified languages.
I've tested this on the following browsers:
- Internet Explorer 6.0 (I'd like to try IE 7 and 8 but don't have access to them)
- Opera 9.6
- Safari 3.0
- iPhone
- Firefox 3.0
http://w3style.co.uk/~d11wtq/kodify/demo/
Code: Select all
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xml:lang="en">
<head>
<title>Kodify Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/blackboard.css" />
<script type="text/javascript" src="../js/lx_analyzer.js"></script>
<script type="text/javascript" src="../js/kodify.js"></script>
<script type="text/javascript" src="../js/lang/js.js"></script>
</head>
<body>
<div class="intro">
<h1>JavaScript Source Code</h1>
<p>
View this page with JavaScript enabled, then try it with JavaScript turned off.
</p>
<p>
View the HTML source and see how clear and semantic it is.
</p>
</div>
<div class="example">
<h2>JavaScript</h2>
<code>
<pre class="kodify js">
/**
* This is a comment.
*/
var ClassA = function ClassA(argName) {
this.publicProperty = argName;
/** @private */
var _privateVar = 42;
this.methodName = function methodName(a, b, c) {
return window.confirm(a + b + c);
};
};
ClassA.prototype.otherMethod = function otherMethod() {
this.publicProperty = 0xFF;
};
//Strings work fine and dandy
var regex = new RegExp("Word\\s+\"moon\"");
//RegExp literals are detected
var regexLiteral = /Word\s+"moon"/;
//The / c / part of this is not detected as a regex
var x = a + b / c / d * 9;
#Single line comments work
doSomething(/regex here/);
</pre>
</code>
</div>
</body>
</html>
Things is definitely WILL add:
- As many languages as I can get (I'll ask others to write the specs)
- Heaps of themes
- Support for bracket pairing (hover on a bracket to see the matching one)
- Support for non-obtrusive line numbering, so you can copy & paste without the line numbers
- Support for embedded languages (such as PHP/HTML, HTML/JavaScript, HTML/CSS)