EnlighterJS Theme Development

Start your Theme-Development by editing the file Source/Themes/Template.MyTheme.css - all changes will directly appear into this document without the need of a rebuild!

Inline Content

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor window.addEvent('domready', function(){}); invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, not highlighted consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

HTML Content

<!DOCTYPE html>
<head>
		<!-- Include EnlighterJS Styles -->
		<link rel="stylesheet" type="text/css" href="../Build/EnlighterJS.yui.css" />
		
		<!-- Include MooTools Framework -->
		<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat.js"></script>
		
		<!-- Include EnlighterJS -->
		<script type="text/javascript" src="../Build/EnlighterJS.yui.js" ></script>
		
		<!-- Initialize EnlighterJS --> 
		<script type="text/javascript">
		window.addEvent('domready', function() {
			// highlight all pre tags
			$$('pre').light({
				altLines : 'hover',
				indent : 2,
				editable: false
			});
		});
		</script>

<!-- Syntax highlight using Languages/Js.js and default theme --> 
<pre data-enlighter-language="css">var myClass = new Class({})</pre> 
 
<!-- Syntax highlight using Languages/Php.js and theme from Themes/Twilight.css --> 
<pre data-enlighter-language="php" data-enlighter-theme="twilight"><?php php_info() ?></pre>

JS Content

window.addEvent('domready', function(){
	// metadata config available ? -> autoinit
	var m = document.getElement('meta[name="EnlighterJS"]');
	
	// check instance
	if (!m){
		return;
	}
	
	// create new options object
	var options = {
		language: m.get('data-language') || 'generic',
		theme: m.get('data-theme') || 'Enlighter',
		indent: m.get('data-indent').toInt() || -1,
		hover: m.get('data-hover') || 'hoverEnabled'
	};
		
	// selector available ? if not, match all pre-tags
	var blockSelector = m.get('data-selector-block') || 'pre';
	
	// selector available ? if not, match all code-tags
	var inlineSelector = m.get('data-selector-inline') || 'code';
});
	


// create output container element
var container = new Element(this.options.containerTag);

// set class and id attributes.
container.addClass(theme + 'EnlighterJS');		
container.addClass('EnlighterJSRendered');		
container.set('id', 'EnlighterJS_' + String.uniqueID());

// generate output based on ordered list of tokens
language.getTokens().each(function(token, index){
	// get classname
	var className = 		 		   token.type ? (language.aliases[token.type] || token.type) : '';
	
	
	
	
	// create new inline element which contains the token - htmlspecialchars get escaped by mootools setText !
	container.grab(new Element('span', {
		'class': className,
		'text': token.text
	}));
});

return container;
	
// set class and id attributes.
container.addClass(theme + 'EnlighterJS');		
container.addClass('EnlighterJSRendered');		
container.set('id', 'EnlighterJS_' + String.uniqueID());

No-Highlight

// create output container element
var container = new Element(this.options.containerTag);

// set class and id attributes.
container.addClass(theme + 'EnlighterJS');		
container.addClass('EnlighterJSRendered');		
container.set('id', 'EnlighterJS_' + String.uniqueID());