271 lines
9.4 KiB
PHTML
271 lines
9.4 KiB
PHTML
<!-- 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 ########################## -->
|
|
|