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