raw download clone
views 175
size 2089 b
<!DOCTYPE html>
<meta charset="utf-8">
<title>Making Quines Prettier</title>
<!-- The defer attribute is not necessary for autoloading, but is necessary
     for the script at the bottom to work as a Quine. -->
<script src="https://rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer=""></script>
<style type="text/css">
.operative { font-weight: bold; border: 1px solid yellow; }
#quine { border: 4px solid #88c; }
<h1>Making Quines Prettier</h1>
Below is the content of this page prettified.  The <code>&lt;pre&gt;</code>
element is prettified because it has <code>class="prettyprint"</code> and
because the sourced script loads a JavaScript library that styles source
The line numbers to the left appear because the preceding comment
<code>&lt;?prettify lang=html linenums=true?&gt;</code> turns on
line-numbering and the
<a href="https://rawgit.com/google/code-prettify/master/styles/index.html">stylesheet</a>
(see <code>skin=sunburst</code> in the <code>&lt;script src&gt;</code>)
specifies that every fifth line should be numbered.
<!-- Language hints can be put in XML application directive style comments. -->
<!--?prettify lang=html linenums=true?-->
<pre class="prettyprint" id="quine"></pre>
<script type="text/javascript">//<![CDATA[
(function () {
  function htmlEscape(s) {
    return s
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');
  // this page's own source code
  var quineHtml = htmlEscape(
    '<!DOCTYPE html>\n<html>\n' +
    document.documentElement.innerHTML +
  // 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>');
  // insert into PRE
  document.getElementById("quine").innerHTML = quineHtml;
close fullscreen
Login or Register to edit or fork this paste. It's free.