108 lines
No EOL
3.2 KiB
HTML
108 lines
No EOL
3.2 KiB
HTML
<!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> |