EnlighterJS/Quickstart-jsinit.html at master · joshmaag/EnlighterJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>EnlighterJS - QUICKSTART</title>

	<!-- Include EnlighterJS Styles -->
	<link rel="stylesheet" type="text/css" href="Build/EnlighterJS.yui.css" />

	<!-- Include MooTools Framework -->
	<script type="text/javascript" src="Resources/mootools-core-1.4.5-full-nocompat.js"></script>

	<!-- Include EnlighterJS -->
	<script type="text/javascript" src="Build/EnlighterJS.yui.js" ></script>

	<!-- Initialize EnlighterJS using the Helper Utility -->
	<script type="text/javascript">
		window.addEvent('domready', function(){
			// 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'
			});

			// initialize enlighterjs for inline elements with class special
			EnlighterJS.Util.Helper(document.getElements('code.special'), {
				// 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'
			});
		});
	</script>

	<style type="text/css">
		/* custom hover effect using specific css class */
		.EnlighterJS li:hover .myHoverClass{
			background-color: #c0c0c0;
		}
	</style>
</head>
<body>
	<h1>Please view the page sources</h1>

	<h4>jQuery Code (Javascript) - highlighted by EnlighterJS</h4>
<pre data-enlighter-language="jquery" data-enlighter-highlight="1,4">
$('#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>
	<!-- TESTCASE STOP -->
</body>
</html>