gribse/site-tpe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added site files

Browse source
This commit is contained in:
gribse 2025-05-16 18:49:08 +02:00
parent a6f70a6c78
commit 329148c253
253 changed files with 30486 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

271
EnlighterJS/Resources/ExampleData/Example3-advanced.phtml Normal file
View file

@ -0,0 +1,271 @@
<!-- 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">
&lt;building name="GlobalDynamics Main Building" id="0xFA8A91C6617DFA1B"&gt;
&lt;group level="2"&gt;
&lt;room number="123"&gt;Conference Room A&lt;/room&gt;
&lt;room number="124"&gt;Conference Room B&lt;/room&gt;
&lt;room number="125"&gt;Conference Room C&lt;/room&gt;
&lt;room number="126"&gt;Conference Room D&lt;/room&gt;
&lt;/group&gt;
&lt;group level="2"&gt;
&lt;room number="17"&gt;John's Office&lt;/room&gt;
&lt;room number="19"&gt;Eric's Office&lt;/room&gt;
&lt;/group&gt;
</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>
&lt;building name="GlobalDynamics Main Building" id="0xFA8A91C6617DFA1B"&gt;
&lt;group level="2"&gt;
&lt;room number="123"&gt;Conference Room A&lt;/room&gt;
&lt;room number="124"&gt;Conference Room B&lt;/room&gt;
&lt;room number="125"&gt;Conference Room C&lt;/room&gt;
&lt;room number="126"&gt;Conference Room D&lt;/room&gt;
&lt;/group&gt;
&lt;group level="2"&gt;
&lt;room number="17"&gt;John's Office&lt;/room&gt;
&lt;room number="19"&gt;Eric's Office&lt;/room&gt;
&lt;/group&gt;
</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">
&lt;building name="GlobalDynamics Main Building" id="0xFA8A91C6617DFA1B"&gt;
&lt;group level="2"&gt;
&lt;room number="123"&gt;Conference Room A&lt;/room&gt;
&lt;room number="124"&gt;Conference Room B&lt;/room&gt;
&lt;room number="125"&gt;Conference Room C&lt;/room&gt;
&lt;room number="126"&gt;Conference Room D&lt;/room&gt;
&lt;/group&gt;
&lt;group level="2"&gt;
&lt;room number="17"&gt;John's Office&lt;/room&gt;
&lt;room number="19"&gt;Eric's Office&lt;/room&gt;
&lt;/group&gt;
</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 ########################## -->