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