I am getting an error on theme_tests.html page provided with syntaxhighlighter_3.0.83, which I wasn't getting earlier.
The error is A DOCTYPE is not allowed in content at <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> inside first script tag <script id="sample" type="text/plain"> tag.
Here is the page theme_tests.html:
<!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>
The web page page I have in my java web application is rendering alright in chrome but not on firefox 4. I remember the same page in my application used to work alright on both browsers before.
Only changed I have done to my system ever since I saw my application rendering the same page properly are:
I added jquerywtp1.10 plugin to my eclipse 3.5 IDE.
Updated firefox to firefox 4 version.
Could someone help me understand what should I do to get the same web page properly displayed on mozilla firefox 4 as well?
This is where I am getting the error, on line number 29: http://programatori.evonet.ro/images/1308360109285/doctype.jpg
theme_tests.html is could be found at: https://bitbucket.org/alexg/syntaxhighlighter/src/a8771a7fc81d/tests/theme_tests.html
Could someone enlighten me for how to do away with this error?
You have declared the document to be a XHTML strict document. However, the document structure violates the doctype rules. Nesting another <!DOCTYPE in the document is illegal. Also putting the JS code with unescaped XML entities in a XHTML strict document is illegal. Learn about doctypes at http://hsivonen.iki.fi/doctype and validate your document against the http://validator.w3.org.
Your first step is to wrap that nested XHTML document in a <