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

40
EnlighterJS/Resources/ExampleData/Example1.phtml Normal file
View file

@ -0,0 +1,40 @@
<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>

49
EnlighterJS/Resources/ExampleData/Example2-jsinit.phtml Normal file
View file

@ -0,0 +1,49 @@
<!-- 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>

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 ########################## -->

73
EnlighterJS/Resources/ExampleData/LanguageDevelopment.phtml Normal file
View file

@ -0,0 +1,73 @@
<?php require('Resources/Templates/ExampleHeader.phtml'); ?>
<!-- Load Custom Language -->
<script type="text/javascript" src="Source/Language/Template.mylang.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var options = {
language : 'mylang',
theme: 'enlighter',
rawButton: true,
windowButton: true,
indent : 2,
infoButton: true,
showLinenumbers: true
};
EnlighterJS.Util.Helper(document.getElements('pre'), Object.merge(options,{
renderer : 'Block'
}));
EnlighterJS.Util.Helper(document.getElements('code'), Object.merge(options,{
renderer : 'Inline'
}));
});
</script>
</head>
<body>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>
<strong>EnlighterJS</strong> <small>Language Development</small>
</h1>
</div>
<div id="content">
<!-- ############################################################# -->
<div class="well">Start your Language-Development by editing the file <strong>Source/Language/Template.mylang.js</strong> - all changes will directly appear into this document without the need of a rebuild!</div>
<h2>Inline Content</h2>
<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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
<code class="special">if FILE == 123.123 then</code>
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.<br /> Lorem ipsum dolor sit amet,
<code>not highlighted</code>
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. 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>
<h2>HTML Content</h2>
<pre data-enlighter-language="mylang">
&lt;!##
# This is a hash-style-comment
if FILE == 123.123 then
echo 'testcase'
elseif
echo "OH NO"
endif
##!&gt;
</pre>
<!-- ############################################################# -->
</div>
<!-- // content -->
</div>
<!-- // container -->
</body>
</html>

148
EnlighterJS/Resources/ExampleData/ThemeDevelopment.phtml Normal file
View file

@ -0,0 +1,148 @@
<?php require('Resources/Templates/ExampleHeader.phtml'); ?>
<!-- Your Custom Theme -->
<link rel="stylesheet" href="../Source/Themes/Template.MyTheme.css" />
<!-- Initialize EnlighterJS -->
<meta name="EnlighterJS" content="Advanced javascript based syntax highlighting" data-language="javascript" data-theme="mytheme" data-indent="2" data-selector-block="pre" data-selector-inline="code" />
</head>
<body>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>
<strong>EnlighterJS</strong> <small>Theme Development</small>
</h1>
</div>
<div id="content">
<!-- ############################################################# -->
<div class="well">Start your Theme-Development by editing the file <strong>Source/Themes/Template.MyTheme.css</strong> - all changes will directly appear into this document without the need of a rebuild!</div>
<h2>Inline Content</h2>
<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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
<code class="special">window.addEvent('domready', function(){});</code>
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.<br /> Lorem ipsum dolor sit amet,
<code>not highlighted</code>
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. 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>
<h2>HTML Content</h2>
<pre data-enlighter-language="html">
&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;!-- Include EnlighterJS Styles --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../Build/EnlighterJS.yui.css&quot; /&gt;
&lt;!-- Include MooTools Framework --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;mootools-core-1.4.5-full-nocompat.js&quot;&gt;&lt;/script&gt;
&lt;!-- Include EnlighterJS --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;../Build/EnlighterJS.yui.js&quot; &gt;&lt;/script&gt;
&lt;!-- Initialize EnlighterJS --&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
window.addEvent('domready', function() {
// highlight all pre tags
$$('pre').light({
altLines : 'hover',
indent : 2,
editable: false
});
});
&lt;/script&gt;
&lt;!-- Syntax highlight using Languages/Js.js and default theme --&gt;
&lt;pre data-enlighter-language=&quot;css&quot;&gt;var myClass = new Class({})&lt;/pre&gt;
&lt;!-- Syntax highlight using Languages/Php.js and theme from Themes/Twilight.css --&gt;
&lt;pre data-enlighter-language=&quot;php&quot; data-enlighter-theme=&quot;twilight&quot;&gt;&lt;?php php_info() ?&gt;&lt;/pre&gt;
</pre>
<h2>JS Content</h2>
<pre class="special" data-enlighter-group="g1" id="Lightit1" data-enlighter-lineoffset="5" data-enlighter-title="Javascript1" data-enlighter-highlight="10,16-19">
window.addEvent('domready', function(){
// metadata config available ? -> autoinit
var m = document.getElement('meta[name="EnlighterJS"]');
// check instance
if (!m){
return;
}
// create new options object
var options = {
language: m.get('data-language') || 'generic',
theme: m.get('data-theme') || 'Enlighter',
indent: m.get('data-indent').toInt() || -1,
hover: m.get('data-hover') || 'hoverEnabled'
};
// selector available ? if not, match all pre-tags
var blockSelector = m.get('data-selector-block') || 'pre';
// selector available ? if not, match all code-tags
var inlineSelector = m.get('data-selector-inline') || 'code';
});
</pre>
<pre class="special" data-enlighter-group="g1" data-enlighter-linenums="true" data-enlighter-title="TypeScript ?!" data-enlighter-theme="mootools">
// create output container element
var container = new Element(this.options.containerTag);
// set class and id attributes.
container.addClass(theme + 'EnlighterJS');
container.addClass('EnlighterJSRendered');
container.set('id', 'EnlighterJS_' + String.uniqueID());
// generate output based on ordered list of tokens
language.getTokens().each(function(token, index){
// get classname
var className = token.type ? (language.aliases[token.type] || token.type) : '';
// create new inline element which contains the token - htmlspecialchars get escaped by mootools setText !
container.grab(new Element('span', {
'class': className,
'text': token.text
}));
});
return container;
</pre>
<pre class="special" data-enlighter-group="g1" data-enlighter-linenums="true" data-enlighter-theme="mootools">
// set class and id attributes.
container.addClass(theme + 'EnlighterJS');
container.addClass('EnlighterJSRendered');
container.set('id', 'EnlighterJS_' + String.uniqueID());
</pre>
<h2>No-Highlight</h2>
<pre data-enlighter-language="no-highlight" data-enlighter-highlight="3,6-9" id="NoLight" class="special">
// create output container element
var container = new Element(this.options.containerTag);
// set class and id attributes.
container.addClass(theme + 'EnlighterJS');
container.addClass('EnlighterJSRendered');
container.set('id', 'EnlighterJS_' + String.uniqueID());
</pre>
<!-- ############################################################# -->
</div>
<!-- // content -->
</div>
<!-- // container -->
</body>
</html>