theme_tests.html | searchcode

/lib/syntaxhighlighter_3.0.83/tests/theme_tests.html

#
HTML | 134 lines | 116 code | 18 blank | 0 comment | 0 complexity | b016986de12efab951b8b16885092ec4 MD5 | raw file
Possible License(s): LGPL-2.1, Apache-2.0, BSD-3-Clause

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>SyntaxHighlighter Theme Tests</title>
	<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
</head>

<body>

<div id="output"></div>

<style>
body {
	background: white;
	font-family: Helvetica;
}

.test-wrap {
	width: 100%;
	height: 800px;
	overflow: auto;
	border: none;
}
</style>

<script id="sample" type="text/plain">
	<!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" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>SyntaxHighlighter Theme Tests</title>
	</head>
	
	<body>
		&lt;script>
		/**
		 * Looks for a child or parent node which has specified classname.
		 * Equivalent to jQuery's $(container).find(".className")
		 * @param {Element} target Target element.
		 * @param {String} search Class name or node name to look for.
		 * @param {Boolean} reverse If set to true, will go up the node tree instead of down.
		 * @return {Element} Returns found child or parent element on null.
		 */
		function findElement(target, search, reverse /* optional */)
		{
			if (target == null)
				return null;
		
			var nodes			= reverse != true ? target.childNodes : [ target.parentNode ],
				propertyToFind	= { '#' : 'id', '.' : 'className' }[search.substr(0, 1)] || 'nodeName',
				expectedValue,
				found
				;
				
			// main return of the found node
			if ((target[propertyToFind] || '').indexOf(expectedValue) != -1)
				return target;
		
			return found;
		};
		&lt;/script>
		
	</body>
	</html>
</script>

<script type="text/javascript">
var themes = [
		['#fff', 'Default'],
		['#000', 'Django'],
		['#fff', 'Eclipse'],
		['#000', 'Emacs'],
		['#000', 'FadeToGrey'],
		['#000', 'MDUltra'],
		['#000', 'Midnight'],
		['#000', 'RDark']
	];
	
$(document).ready(function()
{
	var sample = $('#sample').text().replace(/</g, '&lt;');
	
	$.each(themes, function(index)
	{
		var $iframe = $('<iframe class="test-wrap" src="about:blank" />'),
			background = this[0],
			themeName = this[1]
			;
		
		$('#output')
			.append(''
				+ '<h1>'
					+ '<a href="#theme' + (index + 1) + '">next</a> '
					+ '<a name="theme' + index + '">'
						+ themeName
					+ '</a>'
				+ '</h1>'
			)
			.append($iframe)
			;
			
		$iframe.ready(function()
		{
			var doc = $iframe[0].contentDocument;
			$iframe.css('background', background);
			
			doc.write(''
				+ '<scr' + 'ipt type="text/javascript" src="/sh/scripts/XRegExp.js"></scr' + 'ipt>'
				+ '<scr' + 'ipt type="text/javascript" src="/sh/scripts/shCore.js"></scr' + 'ipt>'
				+ '<scr' + 'ipt type="text/javascript" src="/sh/scripts/shBrushXml.js"></scr' + 'ipt>'
				+ '<scr' + 'ipt type="text/javascript" src="/sh/scripts/shBrushJScript.js"></scr' + 'ipt>'
				+ '<link type="text/css" rel="stylesheet" href="/sh/styles/shCore' + themeName + '.css"/>'
				+ '<pre type="syntaxhighlighter" class="brush: js; html-script: true; highlight: [5, 20]" title="This is SyntaxHighlighter theme ' + themeName + ' in action!">'
					+ sample
				+ '</pre>'
				+ '<pre type="syntaxhighlighter" class="brush: js; html-script: true; collapse: true">'
					+ sample
				+ '</pre>'
				+ '<scr' + 'ipt type="text/javascript">'
					+ 'SyntaxHighlighter.highlight();'
				+ '</scr' + 'ipt>'
				);
			doc.close();
		});
	});
	
	$('#output a[name]:first').attr('name', 'top');
	$('#output a[href]:last').attr('href', '#top').html('top');
});
</script>

</body>
</html>