added site files
This commit is contained in:
parent
a6f70a6c78
commit
329148c253
253 changed files with 30486 additions and 0 deletions
117
EnlighterJS/Resources/Pages/Builder.phtml
Normal file
117
EnlighterJS/Resources/Pages/Builder.phtml
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
|
||||
<section>
|
||||
<div class="container">
|
||||
<article>
|
||||
<h2>Create your customized version</h2>
|
||||
|
||||
<p class="well">You can generate your <strong>customized</strong> EnlighterJS Builds by using the <a title="Promethium" href="http://promethium.andidittrich.de/">Promethium CloudBuilder</a>.
|
||||
Maybe you don't need all Theme/Languages and you want to strip down the package.
|
||||
The Builder always uses the latest EnlighterJS release and automatically compresses the files (both compressed & uncompressed builds are included!).
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<form method="post" action="http://promethium.andidittrich.de/enlighterjs/" id="builder-form">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading"><strong>Language Support</strong> <small><a class="selectall">select all</a> / <a class="selectnone">select none</a></small></div>
|
||||
<div class="panel-body">
|
||||
<?php foreach ($languages as $l => $d){ ?>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Language[<?php echo $l; ?>]"><?php echo $d; ?></label>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading"><strong>Modern Themes</strong> <small><a class="selectall">select all</a> / <a class="selectnone">select none</a></small></div>
|
||||
<div class="panel-body">
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Enlighter]">"Enlighter" Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Eclipse]">"Eclipse" Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Classic]">"Classic" Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Beyond]">"Beyond" Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[MooTwo]">"MooTwo" Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Godzilla]">"Godzilla" Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Droide]">"Droide" Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Minimal]">"Minimal" Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Atomic]">"Atomic" Theme</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading"><strong>Legacy Themes</strong> (Lighter.js) <small><a class="selectall">select all</a> / <a class="selectnone">select none</a></small></div>
|
||||
<div class="panel-body">
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Git]">"Git" Legacy Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[MooTools]">"MooTools" Legacy Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Mocha]">"Mocha" Legacy Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Panic]">"Panic" Legacy Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Tutti]">"Tutti" Legacy Theme</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Theme[Twilight]">"Twilight" Legacy Theme</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading"><strong>Special Features</strong> <small class="text-right"><a class="selectall">select all</a> / <a class="selectnone">select none</a></small></div>
|
||||
<div class="panel-body">
|
||||
<div class="checkbox">
|
||||
<label><input value="1" type="checkbox" name="Feature[Metainit]">Include the Metainit Utility for easy initialization</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<p><button class="btn btn-primary btn-lg" type="submit">Download Custom Package</button></p>
|
||||
</form>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.addEvent('domready', function(){
|
||||
document.getElements('#builder-form .selectall').addEvent('click', function(){
|
||||
this.getParent().getParent().getParent().getElements('input').set('checked', 'checked');
|
||||
});
|
||||
document.getElements('#builder-form .selectnone').addEvent('click', function(){
|
||||
this.getParent().getParent().getParent().getElements('input').set('checked', false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
19
EnlighterJS/Resources/Pages/Changelog.phtml
Normal file
19
EnlighterJS/Resources/Pages/Changelog.phtml
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-sm-12">
|
||||
<article>
|
||||
<?php include('.tmp/Changelog.html'); ?>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 hidden-xs hidden-sm">
|
||||
<ul id="content-nav" data-autogen="true"></ul>
|
||||
|
||||
<div id="ToTop">
|
||||
<a href="#" class="glyphicon glyphicon-upload" title="Scroll To Top"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
19
EnlighterJS/Resources/Pages/Documentation.phtml
Normal file
19
EnlighterJS/Resources/Pages/Documentation.phtml
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-sm-12">
|
||||
<article>
|
||||
<?php include('.tmp/Documentation.html'); ?>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 hidden-xs hidden-sm">
|
||||
<ul id="content-nav" data-autogen="true"></ul>
|
||||
|
||||
<div id="ToTop">
|
||||
<a href="#" class="glyphicon glyphicon-upload" title="Scroll To Top"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
222
EnlighterJS/Resources/Pages/GettingStarted.phtml
Normal file
222
EnlighterJS/Resources/Pages/GettingStarted.phtml
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
<section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-sm-12">
|
||||
<article>
|
||||
<h2>Getting Started</h2>
|
||||
|
||||
<p>EnlighterJS is a free, easy-to-use, syntax highlighting plugin developed for MooTools. Using it can be as simple as adding a single script and style to your website, choosing the elements you wish to highlight, and EnlighterJS takes care of the rest!</p>
|
||||
<br />
|
||||
<div class="bordered">
|
||||
<h3 class="text-center">Prepare your sourecode</h3>
|
||||
<p class="text-center">Just add the <code data-enlighter-language="no-highlight">data-enlighter-language</code> attribute to specify the programming language.</p>
|
||||
<pre data-enlighter-language="no-highlight" class="raw">
|
||||
<pre data-enlighter-language="js">
|
||||
Element.implement({
|
||||
...some js code..
|
||||
});
|
||||
</pre></pre>
|
||||
</div>
|
||||
<div class="icon">
|
||||
Roll the Drums..it will be magically transformed into<br />
|
||||
<span class="glyphicon glyphicon-chevron-down"></span><br />
|
||||
</div>
|
||||
|
||||
<div class="bordered">
|
||||
<h3 class="text-center">Highlighted Code</h3>
|
||||
<pre data-enlighter-language="js">
|
||||
Element.implement({
|
||||
/**
|
||||
* Highlights an element/Removes Element highlighting
|
||||
*
|
||||
* @param {Object, Boolean} [options] EnlighterJS options Object or Boolean value to enable/disable highlighting
|
||||
* @returns {Element} The current Element instance.
|
||||
*/
|
||||
enlight: function(options){
|
||||
// mixed input check - options available ?
|
||||
options = (typeof(options) == "undefined") ? {} : options;
|
||||
|
||||
// convert "true" to empty Object!
|
||||
options = (options===true) ? {} : options;
|
||||
|
||||
// enlighter instance already available ?
|
||||
var enlighter = this.retrieve('EnlighterInstance');
|
||||
|
||||
// hide highlighted sourcecode ?
|
||||
if (options === false){
|
||||
if (enlighter !== null) {
|
||||
enlighter.enlight(false);
|
||||
}
|
||||
// highlight sourcecode and use options
|
||||
}else{
|
||||
// create new enlighter instance
|
||||
if (enlighter === null) {
|
||||
enlighter = new EJS(this, options, null);
|
||||
this.store('EnlighterInstance', enlighter);
|
||||
}
|
||||
enlighter.enlight(options);
|
||||
}
|
||||
|
||||
// element instance
|
||||
return this;
|
||||
},
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
<h2>Get It!</h2>
|
||||
<p>EnlighterJS is available as source download including pre-build css + js files.</p>
|
||||
|
||||
<h3>Install with Bower</h3>
|
||||
<p>You can also use <a href="http://bower.io">Bower</a> (linked to the GitHub repository) to get the wanted version.</p>
|
||||
<code data-enlighter-language="shell">$ bower install enlighterjs</code>
|
||||
|
||||
<hr />
|
||||
<h3>Manual Installation</h3>
|
||||
<p>Or download the latest Release from GitHub and extract the files to your workspace.</p>
|
||||
|
||||
<p>
|
||||
<a class="btn btn-lg btn-primary" href="<?php echo EJS_PACKAGE_ZIP; ?>" role="button"><span class="glyphicon glyphicon-download-alt"></span> EnlighterJS.zip</a>
|
||||
<a class="btn btn-lg btn-primary" href="<?php echo EJS_PACKAGE_TGZ; ?>" role="button"><span class="glyphicon glyphicon-download-alt"></span> EnlighterJS.tar.gz</a>
|
||||
<a class="btn btn-lg btn-primary" href="Builder.html" role="button"><span class="glyphicon glyphicon-download-alt"></span> Custom Package</a>
|
||||
</p>
|
||||
|
||||
<h2>Integration</h2>
|
||||
<p>Three steps to success. EnlighterJS requires <a href="http://mootools.net/core/builder">MooTools.Core >= 1.4.5</a>.</p>
|
||||
|
||||
<h3>1. Link the CSS + JS Files</h3>
|
||||
<p>Modify the paths to match your project settings.</p>
|
||||
<pre class="EnlighterJS" data-enlighter-language="HTML"><head>
|
||||
...
|
||||
<!-- Include EnlighterJS Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="css/EnlighterJS.min.css" />
|
||||
|
||||
<!-- Include MooTools Framework -->
|
||||
<script type="text/javascript" src="js/MooTools-More-1.5.1-compressed.js"></script>
|
||||
|
||||
<!-- Include EnlighterJS -->
|
||||
<script type="text/javascript" src="js/EnlighterJS.min.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="no-highlight">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>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="bordered">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h3><span class="glyphicon glyphicon-education"></span> Example1 <small><a href="Example1.html">View file</a></small></h3>
|
||||
<p><strong>Minimal</strong>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<h3><span class="glyphicon glyphicon-education"></span> Example2 <small><a href="Example2-jsinit.html">View file</a></small></h3>
|
||||
<p><strong>Javascript based Initialization.</strong></p>
|
||||
<p>In some cases, it can be more effective using a javascript based initialization - e.g. use different configs for inline+block code.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<h3><span class="glyphicon glyphicon-education"></span> Example3 <small><a href="Example3-advanced.html">View file</a></small></h3>
|
||||
<p><strong>Advanced Usage</strong></p>
|
||||
<p>Some examples for special use-cases. Requires some deeper javascript knowledge.</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>WordPress Plugin</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p class="lead">Enlighter - The most simple way to use EnlighterJS. <br />
|
||||
Full Visual-Editor-Integration. Build-in Theme Customizer. <br />
|
||||
Ready-to-use, Ready-to-post!
|
||||
</p>
|
||||
<a class="btn btn-lg btn-primary" href="http://wordpress.org/plugins/enlighter/" role="button">Enlighter WordPress Plugin</a>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<img class="featurette-image img-responsive" src="img/screenshot-2.jpg" alt="WordPress Visual Editor Integration" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>License FAQ</h2>
|
||||
<p class="lead">EnlighterJS is released under the Terms of <a href="http://opensource.org/licenses/MIT">The MIT License (X11)</a>. Copyright (c) 2009 Jose Prado, 2013-2015 Andi Dittrich and Contributors</p>
|
||||
|
||||
<h3>Simplification <small>not legally binding</small></h3>
|
||||
<div class="bordered">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4><span class="glyphicon glyphicon-warning-sign"></span> It requires you to</h4>
|
||||
<ul>
|
||||
<li>Keep the license and copyright notice included in the CSS and JavaScript files when you use them in your works</li>
|
||||
<li>Included the FULL License in all copies or substantial portions of the Software</li>
|
||||
</ul>
|
||||
|
||||
<h4><span class="glyphicon glyphicon-remove"></span> It forbids you to</h4>
|
||||
<ul>
|
||||
<li>Redistribute any piece of EnlighterJS without proper attribution</li>
|
||||
<li>Hold the authors liable for damages as the Software is provided as is without warranty of any kind</li>
|
||||
<li>Remove Copyright/License information's</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4><span class="glyphicon glyphicon-ok"></span> It permits you to</h4>
|
||||
<ul>
|
||||
<li>Use EnlighterJS in personal/private projects</li>
|
||||
<li>Use EnlighterJS in commercial projects</li>
|
||||
<li>Use EnlighterJS in internal/closed source projects</li>
|
||||
<li>Modify the source code</li>
|
||||
</ul>
|
||||
|
||||
<h4><span class="glyphicon glyphicon-pushpin"></span> It does not require you to</h4>
|
||||
<ul>
|
||||
<li>Push changes you've made back to the project</li>
|
||||
<li>Add attribution notices/credits to your website</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Full License</h3>
|
||||
<blockquote>
|
||||
<?php echo nl2br(file_get_contents('LICENSE.md')); ?>
|
||||
</blockquote>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 hidden-xs hidden-sm">
|
||||
<ul id="content-nav" data-autogen="true"></ul>
|
||||
|
||||
<div id="ToTop">
|
||||
<a href="#" class="glyphicon glyphicon-upload" title="Scroll To Top"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
77
EnlighterJS/Resources/Pages/Languages.phtml
Normal file
77
EnlighterJS/Resources/Pages/Languages.phtml
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-sm-12">
|
||||
<article>
|
||||
|
||||
<div class="hidden-md hidden-lg sec-nav">
|
||||
<h2>Build-in Languages</h2>
|
||||
<p>
|
||||
|
||||
<?php
|
||||
foreach ($languageExamples as $l){
|
||||
echo '<a class="btn btn-primary btn-sm" href="Language.', $l, '.html">', $l, '</a>';
|
||||
}
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2><?php echo $currentLanguage; ?></h2>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><strong>Select Theme</strong></span>
|
||||
<select id="ThemeChooser" class="form-control">
|
||||
<?php
|
||||
foreach ($themes as $t){
|
||||
echo '<option value="', strtolower($t), '">', $t, '</option>';
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.addEvent('domready', function(){
|
||||
var currentThemeBase = 'enlighterEnlighterJS';
|
||||
|
||||
document.id('ThemeChooser').addEvent('change', function(){
|
||||
// get container
|
||||
var container = document.getElements('.EnlighterJS');
|
||||
var wrapper = document.getElements('.EnlighterJSWrapper');
|
||||
|
||||
container.removeClass(currentThemeBase);
|
||||
wrapper.removeClass(currentThemeBase + 'Wrapper');
|
||||
|
||||
// generate theme name
|
||||
currentThemeBase = this.value.toLowerCase() + 'EnlighterJS';
|
||||
|
||||
// set new theme
|
||||
container.addClass(currentThemeBase);
|
||||
wrapper.addClass(currentThemeBase + 'Wrapper');
|
||||
}).fireEvent('change');
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr />
|
||||
|
||||
<?php include('Resources/TestcaseData/'.strtolower($currentLanguage).'.html'); ?>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 hidden-xs hidden-sm">
|
||||
<h4>Build-in Languages</h4>
|
||||
<ul id="content-nav" data-nav-static="true">
|
||||
<?php
|
||||
foreach ($languageExamples as $l){
|
||||
echo '<li class="', ($l == $currentLanguage) ? 'spyActive': '', '"><a href="Language.', $l, '.html">', $l, '</a></li>';
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
|
||||
<div id="ToTop">
|
||||
<a href="#" class="glyphicon glyphicon-upload" title="Scroll To Top"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
101
EnlighterJS/Resources/Pages/Plugins.phtml
Normal file
101
EnlighterJS/Resources/Pages/Plugins.phtml
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-sm-12">
|
||||
<article>
|
||||
|
||||
<h2>Enlighter WordPress Plugin</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p class="lead">Enlighter - The most simple way to use EnlighterJS. <br />
|
||||
Full Visual-Editor-Integration. Build-in Theme Customizer. <br />
|
||||
Ready-to-use, Ready-to-post!
|
||||
</p>
|
||||
<a class="btn btn-lg btn-primary" href="http://wordpress.org/plugins/enlighter/" role="button">Enlighter WordPress Plugin</a>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<img class="featurette-image img-responsive" src="img/screenshot-2.jpg" alt="WordPress Visual Editor Integration" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Tons of Features</h3>
|
||||
<div class="bordered">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Theme Customizer</h4>
|
||||
<p>
|
||||
Modify the EnlighterJS Themes without any CSS Knowledge
|
||||
<img class="featurette-image img-responsive" src="img/screenshot-8.jpg" alt="Theme Customizer" />
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Theme Live-Preview Mode</h4>
|
||||
<p>
|
||||
See all Theme modifications immediately
|
||||
<img class="featurette-image img-responsive" src="img/screenshot-12.jpg" alt="Live Preview Mode" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Feature List</h3>
|
||||
<ul>
|
||||
<li>Support for all common used languages</li>
|
||||
<li>Theme Customizer including <strong>LIVE Preview Mode</strong></li>
|
||||
<li>Inline Syntax Highlighting</li>
|
||||
<li><strong>Full</strong> Visual-Editor (TinyMCE) Integration (Admin Panel + Frontend)</li>
|
||||
<li>Easy to use Text-Editor mode through the use of Shortcodes</li>
|
||||
<li>Advanced configuration options (CDN usage, ..) are available within the options page.</li>
|
||||
<li>Supports code-groups (displays multiple code-blocks within a tab-pane)</li>
|
||||
<li>Outputs in various formats like ordered lists or inline. Choose the method that works best for you.</li>
|
||||
<li>Extensible language and theme engines - add your own one.</li>
|
||||
<li>Simple CSS based themes</li>
|
||||
<li>Integrated CSS file caching (suitable for high traffic sites)</li>
|
||||
<li>EnlighterJS is written in MooTools. Requires MooTools v1.4+ (included) and client enabled javascript</li>
|
||||
</ul>
|
||||
|
||||
<h3>System requirements</h3>
|
||||
|
||||
<ul>
|
||||
<li>WordPress >= 3.9</li>
|
||||
<li>PHP 5.3, including <code>json</code> functions</li>
|
||||
<li>Webbrowser with enabled Javscript (required for highlighting)</li>
|
||||
<li>Accessable cache directory (<code>/wp-content/plugins/enlighter/cache/</code>)</li>
|
||||
</ul>
|
||||
|
||||
<h3>Installation</h3>
|
||||
<p>You can install the Enlighter package automatically with WordPress` Plugin Manager or manually by uploading the full package.</p>
|
||||
<ol>
|
||||
<li>Download the .zip file of the plugin and extract the content</li>
|
||||
<li>Upload the complete <code>enlighter</code> folder to the <code>/wp-content/plugins/</code> directory</li>
|
||||
<li>Activate the plugin through the 'Plugins' menu in WordPress</li>
|
||||
<li>Goto to the Enlighter settings page and select the default theme which should be used.</li>
|
||||
<li>That's it! You're done. You can select an editor style for your codefragment or enter the following code into a post or page to highlight it (e.g. javascript): <code>[js]var enlighter = new EnlighterJS({});[/js]</code></li>
|
||||
</ol>
|
||||
|
||||
<h3>Compatibility</h3>
|
||||
<p>All browsers supported by MooTools (enabled Javascript required) and with HTML5 capabilities for "data-" attributes are compatible with Enlighter. It's possible that it may work with earlier/other browsers.
|
||||
Generally Enlighter (which javascript part <a href="#" rel="nofollow">EnlighterJS</a> is based on <a href="http://mootools.net/" rel="nofollow">MooTools Javascript Framework</a>) should work together with jQuery in <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" rel="nofollow">noConflict Mode</a> - when you are using jQuery within your WordPress Theme/Page you have to take care of it!</p>
|
||||
|
||||
<ul>
|
||||
<li>Chrome 10+</li>
|
||||
<li>Safari 5+</li>
|
||||
<li>Internet Explorer 6+</li>
|
||||
<li>Firefox 2+</li>
|
||||
<li>Opera 9+</li>
|
||||
</ul
|
||||
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 hidden-xs hidden-sm">
|
||||
<ul id="content-nav" data-autogen="true"></ul>
|
||||
|
||||
<div id="ToTop">
|
||||
<a href="#" class="glyphicon glyphicon-upload" title="Scroll To Top"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
162
EnlighterJS/Resources/Pages/Themes.phtml
Normal file
162
EnlighterJS/Resources/Pages/Themes.phtml
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-sm-12">
|
||||
<article>
|
||||
|
||||
<div class="hidden-md hidden-lg sec-nav">
|
||||
<h2>Build-in Themes</h2>
|
||||
<p>
|
||||
|
||||
<?php
|
||||
foreach ($themes as $t){
|
||||
echo '<a class="btn btn-primary btn-sm" href="Theme.', $t, '.html">', $t, '</a>';
|
||||
}
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2><?php echo $theme; ?> <small>Theme</small></h2>
|
||||
|
||||
<h3>Inline</h3>
|
||||
<p>
|
||||
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.
|
||||
<code data-enlighter-language="js" data-enlighter-theme="<?php echo $theme; ?>">window.addEvent('domready', function(){});</code> invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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.
|
||||
</p>
|
||||
|
||||
<h3>Block <small>with Line-Numbers</small></h3>
|
||||
<pre data-enlighter-language="html" data-enlighter-theme="<?php echo $theme; ?>">
|
||||
<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
|
||||
document.getElements('pre').enlight({
|
||||
indent : 2
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
</pre>
|
||||
|
||||
<h3>Block <small>without Line-Numbers</small></h3>
|
||||
<pre data-enlighter-language="html" data-enlighter-theme="<?php echo $theme; ?>" data-enlighter-linenumbers="false">
|
||||
<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
|
||||
document.getElements('pre').enlight({
|
||||
indent : 2
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
</pre>
|
||||
|
||||
<h3>With Tabs</h3>
|
||||
<pre data-enlighter-language="js" data-enlighter-group="group_<?php echo $theme; ?>" data-enlighter-title="Enlighter-Javascript" data-enlighter-theme="<?php echo $theme; ?>">
|
||||
// Load language parser
|
||||
language = new EnlighterJS.Language[languageName](this.getRawCode(true));
|
||||
|
||||
// compile tokens -> generate output
|
||||
var output = this.renderer.render(language, specialLines, {
|
||||
lineOffset: (this.rawCodeblock.get('data-enlighter-lineoffset') || null),
|
||||
lineNumbers: (this.rawCodeblock.get('data-enlighter-linenums') !== 'false')
|
||||
});
|
||||
|
||||
// set class and id attributes.
|
||||
output.addClass(themeName.toLowerCase() + 'EnlighterJS');
|
||||
output.addClass('EnlighterJS');
|
||||
output.set('id', 'EnlighterJS_' + String.uniqueID());
|
||||
</pre>
|
||||
<pre data-enlighter-language="java" data-enlighter-group="group_<?php echo $theme; ?>" data-enlighter-title="pure Java">
|
||||
// Source: http://en.wikipedia.org/wiki/Java_%28programming_language%29
|
||||
// OddEven.java
|
||||
import javax.swing.JOptionPane;
|
||||
|
||||
public class OddEven {
|
||||
/**
|
||||
* "input" is the number that the user gives to the computer
|
||||
*/
|
||||
private int input; // a whole number("int" means integer)
|
||||
|
||||
/**
|
||||
* This is the constructor method. It gets called when an object of the OddEven type
|
||||
* is being created.
|
||||
*/
|
||||
public OddEven() {
|
||||
/*
|
||||
* In most Java programs constructors can initialize objects with default values, or create
|
||||
* other objects that this object might use to perform its functions. In some Java programs, the
|
||||
* constructor may simply be an empty function if nothing needs to be initialized prior to the
|
||||
* functioning of the object. In this program's case, an empty constructor would suffice.
|
||||
* A constructor must exist; however, if the user doesn't put one in then the compiler
|
||||
* will create an empty one.
|
||||
*/
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
<pre data-enlighter-language="php" data-enlighter-group="group_<?php echo $theme; ?>" data-enlighter-title="Awesome PHP Script">
|
||||
/** Test Snippet */
|
||||
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");
|
||||
|
||||
/* check connection */
|
||||
if (mysqli_connect_errno()) {
|
||||
printf("Connect failed: %s\n", mysqli_connect_error());
|
||||
exit();
|
||||
}
|
||||
|
||||
/* Create table doesn't return a resultset */
|
||||
if ($mysqli->query("CREATE TEMPORARY TABLE myCity LIKE City") === TRUE) {
|
||||
printf("Table myCity successfully created.\n");
|
||||
}
|
||||
|
||||
/* Select queries return a resultset */
|
||||
if ($result = $mysqli->query("SELECT Name FROM City LIMIT 10")) {
|
||||
printf("Select returned %d rows.\n", $result->num_rows);
|
||||
|
||||
/* free result set */
|
||||
$result->close();
|
||||
}
|
||||
</pre>
|
||||
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 hidden-xs hidden-sm">
|
||||
<h4>Build-in Themes</h4>
|
||||
<ul id="content-nav">
|
||||
<?php
|
||||
foreach ($themes as $t){
|
||||
echo '<li class="', ($t == $theme) ? 'spyActive': '', '"><a href="Theme.', $t, '.html">', $t, '</a></li>';
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
|
||||
<div id="ToTop">
|
||||
<a href="#" class="glyphicon glyphicon-upload" title="Scroll To Top"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Add table
Add a link
Reference in a new issue