google prettify code example

Example: google code prettify

<!DOCTYPE html><html><head><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://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer=""></script><style type="text/css">.operative { font-weight: bold; border: 1px solid yellow; }#quine { border: 4px solid #88c; }</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> andbecause the sourced script loads a JavaScript library that styles sourcecode.</p> <p>The line numbers to the left appear because the preceding comment<code><?prettify lang=html linenums=true?></code> turns online-numbering and the<a href="https://raw.githack.com/google/code-prettify/master/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"></pre> <script type="text/javascript">//<![CDATA[(function () {  function htmlEscape(s) {    return s      .replace(/&/g, '&')      .replace(/</g, '<')      .replace(/>/g, '>');  }   // this page's own source code  var quineHtml = htmlEscape(    '<!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>');   // insert into PRE  document.getElementById("quine").innerHTML = quineHtml;})();//]]></script></body></html>

Tags:

Misc Example

Recent Posts