quine.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Making Quines Prettier</title>
  6. <!-- The defer is not necessary for autoloading, but is necessary for the
  7. script at the bottom to work as a Quine. -->
  8. <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
  9. <style>.operative { font-weight: bold; border:1px solid yellow }</style>
  10. </head>
  11. <body>
  12. <h1>Making Quines Prettier</h1>
  13. <p>
  14. Below is the content of this page prettified. The <code>&lt;pre&gt;</code>
  15. element is prettified because it has <code>class="prettyprint"</code> and
  16. because the sourced script loads a JavaScript library that styles source
  17. code.
  18. </p>
  19. <p>
  20. The line numbers to the left appear because the preceding comment
  21. <code>&lt;?prettify lang=html linenums=true?&gt;</code> turns on
  22. line-numbering and the
  23. <a href="http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html">stylesheet</a>
  24. (see <code>skin=sunburst</code> in the <code>&lt;script src&gt;</code>)
  25. specifies that every fifth line should be numbered.
  26. </p>
  27. <!-- Language hints can be put in XML application directive style comments. -->
  28. <?prettify lang=html linenums=true?>
  29. <pre class="prettyprint" id="quine" style="border:4px solid #88c"></pre>
  30. <script>//<![CDATA[
  31. (function () {
  32. function html(s) {
  33. return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  34. }
  35. var quineHtml = html(
  36. '<!DOCTYPE html>\n<html>\n'
  37. + document.documentElement.innerHTML
  38. + '\n<\/html>\n');
  39. // Highlight the operative parts:
  40. quineHtml = quineHtml.replace(
  41. /&lt;script src[\s\S]*?&gt;&lt;\/script&gt;|&lt;!--\?[\s\S]*?--&gt;|&lt;pre\b[\s\S]*?&lt;\/pre&gt;/g,
  42. '<span class="operative">$&</span>');
  43. document.getElementById("quine").innerHTML = quineHtml;
  44. })();
  45. //]]>
  46. </script></body>
  47. </html>