source: tol/TolJava/WebTOLJavaDEMO/web/sh/tests/theme_tests.html @ 9887b93

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