jQuery Litelighter - Light Weight Syntax Highlighting for jQuery and Zepto

Litelighter is a super light weight yet powerful syntax highlighting plugin for jQuery and Zepto. It comes with light and dark themes and js, html, css languages by default. It is super easy to extend! Check below for more languages.

Back to Blog | Fork on Github

• Examples
• Initialization
• Options
• Methods
• Add Languages
• Add Styles
• License

Donation

Try my new app to keep you informed of your car's financing status and value.

Has this Litelighter been helpful to you?

Examples

Toggle On/Off | Toggle Light/Dark

Javascript

$pt = $('#listingsTable1').powertable({
	controller: '#tableController',
	moveDisabled: ['condition'],
	fixedColumns: ['description'],
	fixedRows: [0]
});

Html

<!--
	This is a comment
-->
<table>
	<tr>
		<th data-ptcolumn="description">Description</th>
		<th data-ptcolumn="type">Type</th>
		<th data-ptcolumn="purchased">Purchased</th>
		<th data-ptcolumn="condition">Condition</th>
		<th data-ptcolumn="modelnum">Model #</th>
		<th data-ptcolumn="serialnum">Serial #</th>
		<th data-ptcolumn="assignedto">Assigned To</th>
		<th data-ptcolumn="lang">Language</th>
	</tr>
</table>
<style type="text/css">
	body{ font-size: 12px; background-color: #005500; }
	#myelement{
		line-height: 22px;
		font-size: 2em;
	}
</style>

<script type="text/javascript">
	/*
		here is some script
	*/
	if(myvar == "foobar"){
		for(i=1; i < myarr.length; i++){
			// some output
			$('#myEl').removeClass('highlight');
			return "2012-06-23".match( /^(\d{4})\-(\d{2})\-(\d{2})$/ );
		}
	}
</script>

CSS

/* pt specific styles: ptfixed, ptdragover, ptdraghandle, ptshowhide */
table tr th.ptfixed{ font-size: 12%; /* a fixed table header cell */ }

table tr td.ptfixed{ color: #8F9657; }

table .ptdragover{ height: 100px; width: 100%; }

table .ptdraghandle{ font-family: "Sans Serif"; }

table .ptshowhide:hover{ /* class given to a generated show/hide link */ }

Generic

// some comments
for(i=0; i<10; i++){
	/*
		this is some pseudo code
	*/
	str += " concat str";
}

Initialization

You may include any of the options shown. All are optional.

$('pre').litelighter({
	clone: true,
	style: 'mystyle',
	language: 'css'
});

You may specify inline of the html which language and style to use:

<pre data-lllanguage="js" data-llstyle="mystyle">
	var i = 2+3;
</pre>

The Options

// Whether to clone the existing object (true or false)
clone: false,

// Which style to use. light and dark are available by default
style: 'light',

// which language to use. generic, js, html, css are available by default
language: 'generic',

// how many spaces represent a tab, defaults to 4
tab: '    '

The Methods

// Initialize a litelighter instance
$el.litelighter({});

// Enable a litelighter
$el.litelighter('enable');

// Disable a litelighter
$el.litelighter('disable');

// Destroy a litelighter
$el.litelighter('destroy');

// Get or set an option. When value is provided a Set takes place
// If only the key is provided the value will be retrieved
$el.litelighter('option', key, value);

// If at any time you need the original code
$el.data('llcode');

Add Languages

Adding languages is as simple as adding a new entry to an object. The library currently provide generic, js, css, html. Generic is simple C style highlighter. The new entry should be formatted as follows:

$.litelighter.languages.cfml = {
	comment: { re: /(\&lt\;\!\-\-\-([\s\S]*?)\-\-\-\&gt\;)/g, style: 'comment' },
	cftag: { re: /(\&lt\;\/?cf\w(.|\n)*?\/?\&gt\;)/gi, style: 'number', embed: ['string','numbers','keywords'] },
	tag: { re: /(\&lt\;\/?(?!cf)\w(.|\n)*?\/?\&gt\;)/g, style: 'keyword', embed: ['string'] },
	string: { re: /((\'.*?\')|(\".*?\"))/g, style: 'string' },
	keywords: { re: /(false|true|null)/g, style: 'keyword' },
	sql: { re: /(?:\<cfquery.*?\>)([\s\S]+?)(?:\<\/cfquery\>)/gi, language: 'sql'}
};

Then your language will be available. To embed a different language take a look at the sql entry. The regular expression finds the start and end delimiters with non-captures, and captures the body of the sub language. The "language" key points the match to the new language. The embed option is only needed when sub tokens are allowed, for instance in a tag with attributes, we would like our attributes to be styled as strings. Keep in mind it is a good idea to borrow definitions from the core languages (generic, js, css, html). This way when they are updated so are yours.

<!---
	This is a comment
--->
<div class="myclass">This is some html<div>
<cfset myvar = null>
<cfquery datasource="mydsn" name="myname">
	select * from myTable
</cfquery>

The keys to the new object do not matter, but the "style" properties much match an entry in your style.

Add Styles

Adding styles is similar to languages, but you will be specifying css styles to each entry. You will want to provide at least the styles provided here as they are used by the standard languages, but you may also want more.

$.litelighter.styles.mystyle = {
	code: 'background-color:#141414;color:#ffffff;',
	comment: 'color:#999;',
	string: 'color:#8F9657;',
	number: 'color:#CF6745;',
	keyword: 'color:#6F87A8;',
	operators: 'color:#9e771e;'
};

License

You may use this project under MIT or GPL licenses.

GPL License

MIT License