tweaked example file

mikesamuel@gmail.com · mikesamuel@gmail.com · commit 2c1a0e0cea3f · 2013-02-22T22:40:41.000Z
diff --git a/examples/quine.html b/examples/quine.html
@@ -6,6 +6,7 @@
 <!-- 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>
@@ -31,12 +32,24 @@ <h1>Making Quines Prettier</h1>
 <?prettify lang=html linenums=true?>
 <pre class="prettyprint" id="quine" style="border:4px solid #88c"></pre>
 
-<script>
-//<![CDATA[
-  document.getElementById("quine").appendChild(document.createTextNode(
+<script>//<![CDATA[
+(function () {
+  function html(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  var quineHtml = html(
         '<!DOCTYPE html>\n<html>\n'
-      + document.documentElement.innerHTML
-      + '\n<\/html>\n'));
+      +  document.documentElement.innerHTML 
+      + '\n<\/html>\n');
+
+  // Highlight the operative parts:
+  quineHtml = quineHtml.replace(
+    /&lt;script src[\s\S]*?&gt;&lt;\/script&gt;|&lt;!--\?[\s\S]*?--&gt;|&lt;pre\b[\s\S]*?&lt;\/pre&gt;/g,
+    '<span class="operative">$&</span>');
+
+  document.getElementById("quine").innerHTML = quineHtml;
+})();
 //]]>
 </script></body>
 </html>
