Generic Syntax Highlighter

You are reading Tutorial from Thichnet Blog
​x
 
   <title>Generic Syntax Highlighter</title>
    <style>
    pre {background:#fff;color:#000;border:1px solid;padding:.5em}
    </style>
​
    <pre><code>&lt;!-- comment --&gt;
&lt;div class="foo" id="bar" title="foo \"bar \\\" ba\'z qux"&gt;
  &lt;p&gt;lorem ipsum &amp;amp; dolor sit&lt;/p&gt;
&lt;/div&gt;</code></pre>
    <pre><code>&lt;!DOCTYPE html&gt;
&lt;html dir="ltr"&gt;
  &lt;head&gt;
    &lt;!-- comment --&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;style&gt;
    #foo {color:red}
    .bar {color:#fff}
    &lt;/style&gt;
    &lt;?php
​
    # do header ...
    echo do_header($_GET['foo']);
​
    ?&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script&gt;
    // inline comment
    function foo(bar) {
        var v = /\s 123 true function\//g;
        var w = <mark>"foo" + 4</mark>;
        var x = true;
        var y = 4 + 5 + 1.5 + .4;
        var z = `&lt;div&gt;
  &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;`;
        /**
         * block comment
         */
        return "string" + 'string' + "string \" str\'ing" + 'string \' str\"ing' + "" + '';
    }