Quickstart First Steps with EnlighterJS

Welcome to EnlighterJS - to start with it, follow these simple steps:

  1. Download EnlighterJS and Include the files
  2. Prepare your sourcecode
  3. Initialize EnlighterJS

1. Download & Include EnlighterJS files

Download EnlighterJS and extract the files. You will find some examples located in the *Examples/* directory. Copy the prebuild files of the *Build/* directory into a web-accessible directory of your choice.

<head>
...
<!-- Include EnlighterJS Styles -->
<link rel="stylesheet" type="text/css" href="css/EnlighterJS.yui.css" />
	 
<!-- Include MooTools Framework -->
<script type="text/javascript" src="js/mootools-core-1.4.5-full-nocompat.js"></script>

<!-- Include EnlighterJS -->
<script type="text/javascript" src="js/EnlighterJS.yui.js" ></script>
...
</head>

2. Prepare your sourcecode

Starting with just a small piece of javascript code you wish to highlight. Prepare your sourcecode by giving the element (containing the code) an optional data-enlighter-language attribute with the language of the snippet.

<pre data-enlighter-language="js">
$('#loading-example-btn').click(function () {
	var btn = $(this)
	btn.button('loading')
	$.ajax(...).always(function () {
		btn.button('reset')
	});
});
</pre>

3. Initialize it!

The most simple and elegant way to use EnlighterJS on your page: just add a simple HTML-Meta-Tag to your page with the desired global config 

<!-- Initialize EnlighterJS -->	
<meta name="EnlighterJS" content="Advanced javascript based syntax highlighting" data-indent="4" data-selector-block="pre" data-selector-inline="code" data-language="javascript" />

Ready to use Examples!

Your instantaneous launch into the world of EnlighterJS. For further information, please refer to the Documentation.

Quickstart.html View file

The following code provides a minimalistic example how to use EnlighterJS on your page, using the Metainit initialization method. This will be the best choice for most users.
Metainit just invokes EnlighterJS.Util.Helper() on domready using metatag attributes as options.


    <!-- Include MooTools Framework -->
    <script type="text/javascript" src="../Resources/MooTools.min.js"></script>

    <!-- Include EnlighterJS -->
    <script type="text/javascript" src="../Build/EnlighterJS.min.js"></script>

	<!-- Initialize EnlighterJS; set default language+theme as well as some options -->	
	<meta name="EnlighterJS" content="Advanced javascript based syntax highlighting" data-language="html" data-theme="enlighter" data-indent="4" data-selector-block="pre" data-selector-inline="code.special" data-rawcodebutton="true" data-windowbutton="true" data-infobutton="true" />
</head>
<body>
	<!-- Begin page content -->

Quickstart-jsinit.html - Javascript Initialization View file

In some cases, it can be more effective using a javascript based initialization - e.g. use different configs for inline+block code.


    <!-- Include MooTools Framework -->
    <script type="text/javascript" src="../Resources/MooTools.min.js"></script>

    <!-- Include EnlighterJS -->
    <script type="text/javascript" src="../Build/EnlighterJS.min.js"></script>

	<!-- Initialize EnlighterJS using the Helper Utility -->
	<script type="text/javascript">
		window.addEvent('domready', function(){
			// Global EnlighterJS initialization for block code (selector: pre) and inline code (selector: code.special) with some options
			// EnlighterJS.Util.Init(blockSelector:String, inlineSelector:String, options:Object)
			EnlighterJS.Util.Init('pre', 'code.special', {
				// reindent code -> replace tab with 2 spaces
				indent: 2,
				
				// show all buttons
				infoButton: true,
				windowButton: true,
				rawButton: true,
				
				// special hover class
				hover: 'myHoverClass',
				
				// default language
				language: 'php',
				
				// default theme
				theme: 'classic',
				
				// toolbar labels
				toolbar: {
					rawTitle: 'RAW Code',
					windowTitle: 'New Window',
					infoTitle: 'EnlighterJS'
				}
			});
		});
	</script>
	
	<!-- Special Styles -->
	<style type="text/css">