added site files
This commit is contained in:
parent
a6f70a6c78
commit
329148c253
253 changed files with 30486 additions and 0 deletions
266
EnlighterJS/Quickstart.html
Normal file
266
EnlighterJS/Quickstart.html
Normal file
|
|
@ -0,0 +1,266 @@
|
|||
<!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"><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>
|
||||
</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">
|
||||
<pre data-enlighter-language="js">
|
||||
$('#loading-example-btn').click(function () {
|
||||
var btn = $(this)
|
||||
btn.button('loading')
|
||||
$.ajax(...).always(function () {
|
||||
btn.button('reset')
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
</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"><!-- 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" />
|
||||
</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">
|
||||
|
||||
<!-- 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 -->
|
||||
</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">
|
||||
|
||||
<!-- 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">
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue