Back to menu

Luminousify AJAX Syntax Highlighting


NOTE: I've disabled syntax highlighting on IE6/7 because it has issues with inline-block, although it is usable, just not always perfect.

There are lots of syntax highlighters around: Geshi, Pygments, SyntaxHighlighter, etc. I wrote Luminous because I was dissatisfied with existing highlighters. Well, really I was jealous of Pygments but Python hosting is more expensive than PHP. I wrote it in PHP instead of JavaScript because I tried SyntaxHighlighter and found performance was bad on large sources to the extent that it locked up browsers for noticable lengths of time (Chrome is really the only browser that currently has a sufficiently fast JavaScript engine).

Most of the time, highlighting can reasonably be done inline by the server before the page is sent, but sometimes PHP isn't actually driving your setup and it makes more sense to do it through AJAX.

I don't distribute this with Luminous for the obvious reason that opening an interface on everyone's server isn't the done thing, so you'll have to cobble the different parts together. To use this you need:

With each of these installed, the calling procedure looks something like this:

$('pre').luminousify( {
        url: '/luminous_ajax.php',
        defaultLanguage: 'js',
        delay: 50,
        path: '/code/luminous',
        style: 'soft.css',
        customStyle: '\
    min-width:0px !important;\
    border-left: 2px solid #390; !important;\
  div.luminousified div.code{\
    background-color: transparent !important;\
    padding:1em !important;\


url: The URL to the AJAX script
path: the path to the Luminous directory. This is used to include stylesheets.
customStyle: [optional] Any additional styling to apply to the widget. This helps with integration; you typically can't do this with pure JS as you need to override the !important attribute (which is set originally to prevent page styling from overriding/ruining Luminous's layout). Note that I remove the background colour and add a sidebar.
style: The theming stylesheet. Defaults to luminous_light.css. Look in luminous/style/.
delay : [optional] The delay between AJAX requests in milliseconds, this only applies if the jQuery object/selector result is an array of more than one element.
language/defaultLanguage: the language is chosen like this:

var language = options.langauge;
if (!language) language = this.attr('lang');
if (!language) language = defaultLanguage;
if (!langauge) language = '';

so you can omit the language if it's stored in the element's lang attribute, and you can apply a blanket catch-all in the form of defaultLanguage.


Download the: full source or minified source


See above.