added site files
This commit is contained in:
parent
a6f70a6c78
commit
329148c253
253 changed files with 30486 additions and 0 deletions
99
EnlighterJS/Examples/Example1.html
Normal file
99
EnlighterJS/Examples/Example1.html
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--
|
||||
EnlighterJS Examples
|
||||
|
||||
Author: Andi Dittrich <http://andidittrich.de>
|
||||
License: MIT X11 License
|
||||
-->
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Favicon !-->
|
||||
<link rel="icon" href="../Resources/favicon.png" type="image/png" />
|
||||
|
||||
<title>Basic EnlighterJS Example | EnlighterJS</title>
|
||||
|
||||
<!-- Bootstrap CSS - just 4 styling - not required for enlighterjs -->
|
||||
<link rel="stylesheet" href="../Resources/bootstrap/bootstrap.min.css">
|
||||
|
||||
<!-- Include EnlighterJS Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="../Build/EnlighterJS.min.css" />
|
||||
|
||||
<!-- Monospace Fonts on Google Webfonts !-->
|
||||
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono|Roboto+Mono:400,700,400italic,500,500italic,700italic|Ubuntu+Mono:400,700,400italic,700italic|Droid+Sans+Mono|Source+Code+Pro:400,600' rel='stylesheet' type='text/css'>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Special Styles -->
|
||||
<style type="text/css">
|
||||
/* custom hover effect using specific css class */
|
||||
.EnlighterJS.myHoverClass li:hover{
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<meta name="EnlighterJS" content="Advanced javascript based syntax highlighting" data-language="javascript" data-indent="2" data-selector-block="pre" data-selector-inline="code" /></head>
|
||||
<body>
|
||||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Basic EnlighterJS Example </h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<!-- ############################################################# -->
|
||||
<div class="alert alert-success" role="alert">Level: <strong>Beginner</strong></div>
|
||||
|
||||
<h3>Some Examples</h3>
|
||||
<h4>jQuery Code (Javascript) - highlighted by EnlighterJS</h4>
|
||||
<pre data-enlighter-language="jquery" data-enlighter-highlight="5">
|
||||
$('#loading-example-btn').click(function () {
|
||||
var btn = $(this)
|
||||
btn.button('loading')
|
||||
$.ajax(...).always(function () {
|
||||
btn.button('reset')
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
|
||||
<h4>Code-Tabs</h4>
|
||||
<pre data-enlighter-language="jquery" data-enlighter-highlight="5" data-enlighter-group="group1">
|
||||
$('#loading-example-btn').click(function () {
|
||||
var btn = $(this)
|
||||
btn.button('loading')
|
||||
$.ajax(...).always(function () {
|
||||
btn.button('reset')
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
<pre data-enlighter-language="mootools" data-enlighter-highlight="1" data-enlighter-group="group1">
|
||||
// initialize enlighterjs for block elements
|
||||
EnlighterJS.Util.Helper(document.getElements('pre'), {
|
||||
// replace tabs with 2 spaces
|
||||
indent: 2,
|
||||
|
||||
// special hover class
|
||||
hover: 'myHoverClass',
|
||||
|
||||
// block element renderer
|
||||
renderer: 'Block'
|
||||
});
|
||||
</pre>
|
||||
|
||||
<h4>Inline Code</h4>
|
||||
<p>EnlighterJS also supports <code class="special" data-enlighter-language="js">alert('Inline Sourcecode highlighting');</code> (since version 2.0).</p>
|
||||
<!-- ############################################################# -->
|
||||
</div>
|
||||
<!-- // content -->
|
||||
|
||||
</div>
|
||||
<!-- // container -->
|
||||
</body>
|
||||
</html>
|
||||
108
EnlighterJS/Examples/Example2-jsinit.html
Normal file
108
EnlighterJS/Examples/Example2-jsinit.html
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--
|
||||
EnlighterJS Examples
|
||||
|
||||
Author: Andi Dittrich <http://andidittrich.de>
|
||||
License: MIT X11 License
|
||||
-->
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Favicon !-->
|
||||
<link rel="icon" href="../Resources/favicon.png" type="image/png" />
|
||||
|
||||
<title>Javascript Initialization Example | EnlighterJS</title>
|
||||
|
||||
<!-- Bootstrap CSS - just 4 styling - not required for enlighterjs -->
|
||||
<link rel="stylesheet" href="../Resources/bootstrap/bootstrap.min.css">
|
||||
|
||||
<!-- Include EnlighterJS Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="../Build/EnlighterJS.min.css" />
|
||||
|
||||
<!-- Monospace Fonts on Google Webfonts !-->
|
||||
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono|Roboto+Mono:400,700,400italic,500,500italic,700italic|Ubuntu+Mono:400,700,400italic,700italic|Droid+Sans+Mono|Source+Code+Pro:400,600' rel='stylesheet' type='text/css'>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Special Styles -->
|
||||
<style type="text/css">
|
||||
/* custom hover effect using specific css class */
|
||||
.EnlighterJS.myHoverClass li:hover{
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Javascript Initialization Example </h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<!-- ############################################################# -->
|
||||
<!-- 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>
|
||||
|
||||
<div class="alert alert-success" role="alert">Level: <strong>Beginner</strong></div>
|
||||
|
||||
<h3>Some Examples</h3>
|
||||
<h4>jQuery Code (Javascript) - highlighted by EnlighterJS</h4>
|
||||
<pre data-enlighter-language="jquery" data-enlighter-highlight="5">
|
||||
$('#loading-example-btn').click(function () {
|
||||
var btn = $(this)
|
||||
btn.button('loading')
|
||||
$.ajax(...).always(function () {
|
||||
btn.button('reset')
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
<h4>Inline Code</h4>
|
||||
<p>EnlighterJS also supports <code class="special" >$content = print_r(array(1,2,3), true);</code> (since version 2.0).</p>
|
||||
|
||||
<!-- ############################################################# -->
|
||||
</div>
|
||||
<!-- // content -->
|
||||
|
||||
</div>
|
||||
<!-- // container -->
|
||||
</body>
|
||||
</html>
|
||||
330
EnlighterJS/Examples/Example3-advanced.html
Normal file
330
EnlighterJS/Examples/Example3-advanced.html
Normal file
|
|
@ -0,0 +1,330 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--
|
||||
EnlighterJS Examples
|
||||
|
||||
Author: Andi Dittrich <http://andidittrich.de>
|
||||
License: MIT X11 License
|
||||
-->
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Favicon !-->
|
||||
<link rel="icon" href="../Resources/favicon.png" type="image/png" />
|
||||
|
||||
<title>Advanced Javascript Example | EnlighterJS</title>
|
||||
|
||||
<!-- Bootstrap CSS - just 4 styling - not required for enlighterjs -->
|
||||
<link rel="stylesheet" href="../Resources/bootstrap/bootstrap.min.css">
|
||||
|
||||
<!-- Include EnlighterJS Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="../Build/EnlighterJS.min.css" />
|
||||
|
||||
<!-- Monospace Fonts on Google Webfonts !-->
|
||||
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono|Roboto+Mono:400,700,400italic,500,500italic,700italic|Ubuntu+Mono:400,700,400italic,700italic|Droid+Sans+Mono|Source+Code+Pro:400,600' rel='stylesheet' type='text/css'>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Special Styles -->
|
||||
<style type="text/css">
|
||||
/* custom hover effect using specific css class */
|
||||
.EnlighterJS.myHoverClass li:hover{
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Advanced Javascript Example </h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<!-- ############################################################# -->
|
||||
<!-- Initialize EnlighterJS using the Helper Utility -->
|
||||
<script type="text/javascript">
|
||||
window.addEvent('domready', function(){
|
||||
// ==========================================================
|
||||
// EXAMPLE 1 - Different Inline+Block Config (default Language+Theme)
|
||||
// ==========================================================
|
||||
// initialize enlighterjs for block elements within container #example1
|
||||
EnlighterJS.Util.Helper(document.getElements('#example1 pre'), {
|
||||
// replace tabs with 2 spaces
|
||||
indent: 2,
|
||||
|
||||
// default language: js
|
||||
language: 'javascript',
|
||||
|
||||
// block element renderer
|
||||
renderer: 'Block',
|
||||
|
||||
// no tab pane (also if data-enlighter-group attribute is provided!)
|
||||
grouping: false
|
||||
});
|
||||
|
||||
// initialize enlighterjs for inline elements within container #example1
|
||||
EnlighterJS.Util.Helper(document.getElements('#example1 code.ih'), {
|
||||
// inline! element renderer (this is important for inline syntax highlighting - otherwise the code will be displayed as <ol> list like block elements!)
|
||||
renderer: 'Inline',
|
||||
|
||||
// set default language to php
|
||||
language: 'php',
|
||||
|
||||
// use the classic theme for inline code!
|
||||
theme: 'classic'
|
||||
});
|
||||
|
||||
// ==========================================================
|
||||
// EXAMPLE 2 - Highlight a single pre element using the Native Element.enlight extension
|
||||
// ==========================================================
|
||||
// you can pass any EnlighterJS options as object or just true/false
|
||||
document.id('Example2_Codeblock').enlight({
|
||||
language: 'xml',
|
||||
theme: 'classic',
|
||||
indent: 3,
|
||||
infoButton: true,
|
||||
windowButton: true
|
||||
});
|
||||
|
||||
// enable/disable highlighting using buttons
|
||||
document.getElement('#example2 .hiOn').addEvent('click', function(){
|
||||
document.id('Example2_Codeblock').enlight(true);
|
||||
});
|
||||
document.getElement('#example2 .hiOff').addEvent('click', function(){
|
||||
document.id('Example2_Codeblock').enlight(false);
|
||||
});
|
||||
|
||||
// ==========================================================
|
||||
// EXAMPLE 3 - Highlight a single pre element using classic EnlighterJS Class context
|
||||
// ==========================================================
|
||||
// get element
|
||||
var example3_el = document.getElement('#example3 pre');
|
||||
|
||||
// create config
|
||||
var options3 = {
|
||||
language: 'xml',
|
||||
theme: 'classic',
|
||||
indent: 2,
|
||||
infoButton: true,
|
||||
windowButton: true,
|
||||
rawButton: true
|
||||
};
|
||||
|
||||
// create new instance
|
||||
var enlighter3 = new EnlighterJS(example3_el, options3);
|
||||
|
||||
// start highligjting
|
||||
enlighter3.enlight(true);
|
||||
|
||||
// enable/disable highlighting using buttons
|
||||
document.getElement('#example3 .hiOn').addEvent('click', function(){
|
||||
enlighter3.enlight(true);
|
||||
});
|
||||
document.getElement('#example3 .hiOff').addEvent('click', function(){
|
||||
enlighter3.enlight(false);
|
||||
});
|
||||
|
||||
// ==========================================================
|
||||
// EXAMPLE 4 - Codegroups required EnlighterJS.Util.Helper !
|
||||
// ==========================================================
|
||||
// initialize enlighterjs for block elements within container #example4
|
||||
EnlighterJS.Util.Helper(document.getElements('#example4 pre'), {
|
||||
// replace tabs with 2 spaces
|
||||
indent: 2,
|
||||
|
||||
// default language: js
|
||||
language: 'javascript',
|
||||
|
||||
// block element renderer
|
||||
renderer: 'Block',
|
||||
|
||||
// use Beyond as default theme
|
||||
theme: 'beyond',
|
||||
|
||||
// no linennumbers
|
||||
showLinenumbers: false
|
||||
});
|
||||
|
||||
// ==========================================================
|
||||
// EXAMPLE 5 - Using EnlighterJS with dynamical loaded content
|
||||
// ==========================================================
|
||||
// create new html request - use testcase data as source
|
||||
var htmlRequest5 = new Request.HTML({
|
||||
evalScripts: false,
|
||||
url: '../Resources/TestcaseData/c.html',
|
||||
|
||||
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
|
||||
// directly append the content into the inner example5 pane
|
||||
document.id('example5').set('html', responseHTML);
|
||||
|
||||
// highlight all pre elements within the container!
|
||||
EnlighterJS.Util.Init('#example5 pre', '#example5 code', {
|
||||
// replace tabs with 2 spaces
|
||||
indent: 2,
|
||||
|
||||
// use Beyond as default theme
|
||||
theme: 'classic',
|
||||
|
||||
// no linennumbers
|
||||
showLinenumbers: false
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// trigger request on click
|
||||
document.getElement('#example5 .loadContent').addEvent('click', function(){
|
||||
htmlRequest5.get();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="alert alert-info" role="alert">Level: <strong>Intermediate/Advanced</strong></div>
|
||||
<!-- EXAMPLE 1 ########################## -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Example 1 - Different Inline+Block Config</div>
|
||||
<div class="panel-body" id="example1">
|
||||
<h4>Javascript Code - default language JS</h4>
|
||||
<pre data-enlighter-highlight="5">
|
||||
$('#loading-example-btn').click(function () {
|
||||
var btn = $(this)
|
||||
btn.button('loading')
|
||||
$.ajax(...).always(function () {
|
||||
btn.button('reset')
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
|
||||
<h4>Inline PHP Code - Using classic Theme and PHP as default language </h4>
|
||||
<p>EnlighterJS also supports <code class="ih" >$content = print_r(array(1,2,3), true);</code> (since version 2.0).<br />Not highlighted (selector not matching) <code>$content = print_r(array(1,2,3), true);</code></p>
|
||||
</div></div>
|
||||
<!-- // EXAMPLE 1 ########################## -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- EXAMPLE 2 ########################## -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Example 2 - Using native Element.enlight() extension</div>
|
||||
<div class="panel-body" id="example2">
|
||||
<p>Just want to highlight single elements on your page, maybe loaded dynamically and not available on domready ?</p>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default hiOn">Highlight</button>
|
||||
<button type="button" class="btn btn-default hiOff">Un-Highlight</button>
|
||||
</div>
|
||||
<h4>XML Code</h4>
|
||||
<pre id="Example2_Codeblock">
|
||||
<building name="GlobalDynamics Main Building" id="0xFA8A91C6617DFA1B">
|
||||
<group level="2">
|
||||
<room number="123">Conference Room A</room>
|
||||
<room number="124">Conference Room B</room>
|
||||
<room number="125">Conference Room C</room>
|
||||
<room number="126">Conference Room D</room>
|
||||
</group>
|
||||
<group level="2">
|
||||
<room number="17">John's Office</room>
|
||||
<room number="19">Eric's Office</room>
|
||||
</group>
|
||||
</pre>
|
||||
</div></div>
|
||||
<!-- // EXAMPLE 2 ########################## -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- EXAMPLE 3 ########################## -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Example 3 - Using EnlighterJS in OOP context</div>
|
||||
<div class="panel-body" id="example3">
|
||||
<p>This method is recommended if you want to do some advanced stuff</p>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default hiOn">Highlight</button>
|
||||
<button type="button" class="btn btn-default hiOff">Un-Highlight</button>
|
||||
</div>
|
||||
|
||||
<h4>XML Code</h4>
|
||||
<pre>
|
||||
<building name="GlobalDynamics Main Building" id="0xFA8A91C6617DFA1B">
|
||||
<group level="2">
|
||||
<room number="123">Conference Room A</room>
|
||||
<room number="124">Conference Room B</room>
|
||||
<room number="125">Conference Room C</room>
|
||||
<room number="126">Conference Room D</room>
|
||||
</group>
|
||||
<group level="2">
|
||||
<room number="17">John's Office</room>
|
||||
<room number="19">Eric's Office</room>
|
||||
</group>
|
||||
</pre>
|
||||
</div></div>
|
||||
<!-- // EXAMPLE 3 ########################## -->
|
||||
|
||||
|
||||
|
||||
<!-- EXAMPLE 4 ########################## -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Example 4 - Using Codegroups</div>
|
||||
<div class="panel-body" id="example4">
|
||||
<p>If you need Codegroups, you have to use the <code>EnlighterJS.Util.Helper</code> utility function for initialiation which does the "magic" part for you! <br />
|
||||
Note: <code>EnlighterJS.Util.Init</code> as well as <code>EnlighterJS.Util.Metainit</code> trigger this utility!</p>
|
||||
|
||||
<h4>XML Code</h4>
|
||||
<pre data-enlighter-group="EX4" data-enlighter-title="XML Document" data-enlighter-language="xml">
|
||||
<building name="GlobalDynamics Main Building" id="0xFA8A91C6617DFA1B">
|
||||
<group level="2">
|
||||
<room number="123">Conference Room A</room>
|
||||
<room number="124">Conference Room B</room>
|
||||
<room number="125">Conference Room C</room>
|
||||
<room number="126">Conference Room D</room>
|
||||
</group>
|
||||
<group level="2">
|
||||
<room number="17">John's Office</room>
|
||||
<room number="19">Eric's Office</room>
|
||||
</group>
|
||||
</pre>
|
||||
<pre data-enlighter-group="EX4" data-enlighter-title="jQuery Code" data-enlighter-language="javascript">
|
||||
$('#loading-example-btn').click(function () {
|
||||
var btn = $(this)
|
||||
btn.button('loading')
|
||||
$.ajax(...).always(function () {
|
||||
btn.button('reset')
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
</div></div>
|
||||
<!-- // EXAMPLE 4 ########################## -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- EXAMPLE 5 ########################## -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Example 5 - Dynamical Content/AJAX</div>
|
||||
<div class="panel-body" id="example5">
|
||||
<p>You can also load dynamic content and highlight it! The most simple way is the use of <code>EnlighterJS.Util.Init</code> utility function!</p>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default loadContent">Load Content & Highlight it</button>
|
||||
</div>
|
||||
</div></div>
|
||||
<!-- // EXAMPLE 5 ########################## -->
|
||||
|
||||
<!-- ############################################################# -->
|
||||
</div>
|
||||
<!-- // content -->
|
||||
|
||||
</div>
|
||||
<!-- // container -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue