<!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>
<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;
};
</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, '<');
$.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>
