Below is the content of this page prettified. The <pre>
element is prettified because it has class="prettyprint"
and
because the sourced script loads a JavaScript library that styles source
code.
The line numbers to the left appear because the preceding comment
<?prettify lang=html linenums=true?>
turns on
line-numbering and the
stylesheet
(see skin=sunburst
in the <script src>
)
specifies that every fifth line should be numbered.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Making Quines Prettier</title> <!-- The defer is not necessary for autoloading, but is necessary for the script at the bottom to work as a Quine. --> <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer="defer"></script> <style>.operative { font-weight: bold; border:1px solid yellow }</style> </head> <body> <h1>Making Quines Prettier</h1> <p> Below is the content of this page prettified. The <code><pre></code> element is prettified because it has <code>class="prettyprint"</code> and because the sourced script loads a JavaScript library that styles source code. </p> <p> The line numbers to the left appear because the preceding comment <code><?prettify lang=html linenums=true?></code> turns on line-numbering and the <a href="http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html">stylesheet</a> (see <code>skin=sunburst</code> in the <code><script src></code>) specifies that every fifth line should be numbered. </p> <!-- Language hints can be put in XML application directive style comments. --> <!--?prettify lang=html linenums=true?--> <pre class="prettyprint" id="quine" style="border:4px solid #88c"></pre> <script>//<![CDATA[ (function () { function html(s) { return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); } var quineHtml = html( '<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n<\/html>\n'); // Highlight the operative parts: quineHtml = quineHtml.replace( /<script src[\s\S]*?><\/script>|<!--\?[\s\S]*?-->|<pre\b[\s\S]*?<\/pre>/g, '<span class="operative">$&</span>'); document.getElementById("quine").innerHTML = quineHtml; })(); //]]> </script></body> </html>