Permalink
Fetching contributors…
Cannot retrieve contributors at this time
266 lines (224 sloc) 11.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
<!--
EnlighterJS Documentation
Author: Andi Dittrich <http://andidittrich.de>
Version: v2.7.0 License: MIT X11 License
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="Resources/favicon.png" type="image/png">
<title>Quickstart First Steps with EnlighterJS | EnlighterJS</title>
<link rel="stylesheet" href="Resources/bootstrap-3.2.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="Resources/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="Resources/EnlighterWeb.less">
<link rel="stylesheet" href="Resources/GitHubButtons.yui.css">
<link rel="stylesheet" type="text/css" href="Build/EnlighterJS.min.css" />
<script type="text/javascript" src="Resources/MooTools.min.js"></script>
<script type="text/javascript" src="Resources/GitHubButtons.MooTools.yui.js"></script>
<script type="text/javascript" src="Build/EnlighterJS.min.js"></script>
<script type="text/javascript" src="Resources/EnlighterWeb.js"></script>
<meta name="EnlighterJS" content="Advanced javascript based syntax highlighting" data-language="generic" data-indent="2" data-selector-block="pre" data-selector-inline="code" data-rawcodebutton="true" data-windowbutton="true" data-infobutton="true" />
</head>
<body>
<!-- Topnav -->
<div id="navbar-wrapper">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">EnlighterJS <small>v2.7.0</small></a>
</div>
<ul class="nav navbar-nav">
<li><a href="Quickstart.html">Quickstart<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Startup</li>
<li><a href="Quickstart.html">Quickstart</a></li>
<li class="divider"></li>
<li class="dropdown-header">Examples</li>
<li><a href="Examples/Example1.html" target="_blank">Startup Example</a></li>
<li><a href="Examples/Example2-jsinit.html" target="_blank">Javascript-Initialization</a></li>
<li><a href="Examples/Example3-advanced.html" target="_blank">Advanced-Usage</a></li>
</ul></li>
<li><a href="Documentation.html">Docs<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="Documentation.html">Documentation</a></li>
<li><a href="Changelog.html">Changelog</a></li>
</ul></li>
<li class="dropdown"><a href="#">Examples<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Languages</li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="javascript.html">Javascript</a></li>
<li><a href="xml.html">XML</a></li>
<li><a href="markdown.html">Markdown</a></li>
<li><a href="json.html">JSON</a></li>
<li><a href="php.html">PHP</a></li>
<li><a href="sql.html">SQL</a></li>
<li><a href="java.html">Java</a></li>
<li><a href="python.html">Python</a></li>
<li><a href="cpp.html">C++</a></li>
<li><a href="csharp.html">C#</a></li>
<li><a href="c.html">C</a></li>
<li><a href="ruby.html">Ruby</a></li>
<li><a href="nsis.html">NSIS</a></li>
<li><a href="diff.html">Diff</a></li>
<li><a href="ini.html">Ini/Conf</a></li>
<li><a href="avrasm.html">AVR Assembler</a></li>
<li><a href="raw.html">RAW Code</a></li>
<li><a href="nohighlight.html">No-Highlighted Code</a></li>
<li class="divider"></li>
<li class="dropdown-header">Special</li>
<li><a href="unit.html">Unit Testcases</a></li>
</ul></li>
<li><a href="Themes.html">Themes</a></li>
<li><a href="http://wordpress.org/plugins/enlighter/">Plugins<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://wordpress.org/plugins/enlighter/">Enlighter for WordPress</a></li>
</ul></li>
<li><a href="https://github.com/AndiDittrich/EnlighterJS/archive/master.zip">Download<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Special</li>
<li><a href="Builder.html">Custom EnlighterJS Build</a></li>
<li class="divider"></li>
<li class="dropdown-header">Get it from GitHub</li>
<li><a href="https://github.com/AndiDittrich/EnlighterJS/archive/master.zip">Download Package (latest)</a></li>
<li><a href="https://github.com/AndiDittrich/EnlighterJS">Browse on GitHub</a></li>
</ul></li>
<li><a href="#">Help<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">EnlighterJS Support</li>
<li><a href="https://github.com/AndiDittrich/EnlighterJS/issues">Report a Bug</a></li>
<li><a href="https://github.com/AndiDittrich/EnlighterJS/issues">Feature Request</a></li>
<li><a href="http://andidittrich.de/contact">Contact</a></li>
</ul></li>
</ul>
<div class="navbar-header navbar-right" id="githubbutton1"></div>
<div class="navbar-header navbar-right" id="githubbutton2"></div>
</div>
</div>
</div>
<!-- // topnav -->
<!-- Header/Title -->
<div class="page-header">
<div class="container">
<h1>
Quickstart <small>First Steps with EnlighterJS</small> </h1>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="row">
<div class="col-md-10" id="content">
<div class="well">
<p><strong>Welcome to EnlighterJS</strong> - to start with it, follow these simple steps:</p>
<ol>
<li>Download EnlighterJS and Include the files</li>
<li>Prepare your sourcecode</li>
<li>Initialize EnlighterJS</li>
</ol>
</div>
<h3>1. Download & Include EnlighterJS files</h3>
<p>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.</p>
<pre class="EnlighterJS" data-enlighter-language="HTML">&lt;head&gt;
...
&lt;!-- Include EnlighterJS Styles --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/EnlighterJS.yui.css&quot; /&gt;
&lt;!-- Include MooTools Framework --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/mootools-core-1.4.5-full-nocompat.js&quot;&gt;&lt;/script&gt;
&lt;!-- Include EnlighterJS --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/EnlighterJS.yui.js&quot; &gt;&lt;/script&gt;
...
&lt;/head&gt;
</pre>
<h3>2. Prepare your sourcecode</h3>
<p>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 <code>data-enlighter-language</code> attribute with the language of the snippet.</p>
<pre data-enlighter-language="html">
&lt;pre data-enlighter-language=&quot;js&quot;&gt;
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
$.ajax(...).always(function () {
btn.button('reset')
});
});
&lt;/pre&gt;
</pre>
<h3>3. Initialize it!</h3>
<p>The most simple and elegant way to use EnlighterJS on your page: just add a simple <strong>HTML-Meta-Tag</strong> to your page with the desired global config </p>
<pre class="EnlighterJS" data-enlighter-language="HTML">&lt;!-- Initialize EnlighterJS --&gt;
&lt;meta name=&quot;EnlighterJS&quot; content=&quot;Advanced javascript based syntax highlighting&quot; data-indent=&quot;4&quot; data-selector-block=&quot;pre&quot; data-selector-inline=&quot;code&quot; data-language=&quot;javascript&quot; /&gt;
</pre>
<hr />
<h2>Ready to use Examples!</h2>
<p>Your instantaneous launch into the world of EnlighterJS. For further information, please refer to the <a href="Documentation.html">Documentation</a>.</p>
<h3>Quickstart.html <small><a href="Examples/Example1.html">View file</a></small></h3>
<p>The following code provides a minimalistic example how to use EnlighterJS on your page, using the <strong>Metainit</strong> initialization method. This will be the best choice for most users.<br />
Metainit just invokes <code>EnlighterJS.Util.Helper()</code> on <code>domready</code> using metatag attributes as options.</p>
<pre data-enlighter-language="html" data-enlighter-lineoffset="24">
&lt;!-- Include MooTools Framework --&gt;
&lt;script type="text/javascript" src="../Resources/MooTools.min.js"&gt;&lt;/script&gt;
&lt;!-- Include EnlighterJS --&gt;
&lt;script type="text/javascript" src="../Build/EnlighterJS.min.js"&gt;&lt;/script&gt;
&lt;!-- Initialize EnlighterJS; set default language+theme as well as some options --&gt;
&lt;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" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Begin page content --&gt;
</pre>
<h3>Quickstart-jsinit.html - Javascript Initialization <small><a href="Examples/Example2-jsinit.html">View file</a></small></h3>
<p>In some cases, it can be more effective using a javascript based initialization - e.g. use different configs for inline+block code.</p>
<pre data-enlighter-language="html" data-enlighter-lineoffset="24">
&lt;!-- Include MooTools Framework --&gt;
&lt;script type="text/javascript" src="../Resources/MooTools.min.js"&gt;&lt;/script&gt;
&lt;!-- Include EnlighterJS --&gt;
&lt;script type="text/javascript" src="../Build/EnlighterJS.min.js"&gt;&lt;/script&gt;
&lt;!-- Initialize EnlighterJS using the Helper Utility --&gt;
&lt;script type="text/javascript"&gt;
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 -&gt; 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'
}
});
});
&lt;/script&gt;
&lt;!-- Special Styles --&gt;
&lt;style type="text/css"&gt;
</pre> </div>
<div class="col-md-2 sidebar">
</div>
</div>
</div>
<!-- // container -->
<!-- Sticky Footer Message -->
<div id="footer">
<div class="container">
<p>
<strong>EnlighterJS</strong> is developed by <a href="http://andidittrich.de">Andi Dittrich</a>
</p>
<p class="small"><a href="https://github.com/AndiDittrich/EnlighterJS/archive/master.zip">Download</a> EnlighterJS on <a href="https://github.com/AndiDittrich/EnlighterJS">GitHub</a> | It's released under the Terms of <a href="LICENSE.txt">MIT X11 License</a> | Demo created with <a href="http://getbootstrap.com">Bootstrap</a> | <a href="http://github-buttons.andidittrich.de/">GitHub Buttons</a></p>
</div>
</div>
<!-- // Sticky Footer Message -->
</body>
</html>