anchor.diff:            h3#inputs Inputs
             form
               fieldset.form-group
  -              label(for="input-text") Input text
  -              input#input-text(type="text" class="form-control")
  -            fieldset.form-group
  -              label(for="input-password") Input password
  -              input#input-password(type="password" class="form-control")
  +              label(for='input-text') Input text
  +              input#input-text(type='text' class='form-control')
  +            fieldset.form-group
  +              label(for='input-password') Input password
  +              input#input-password(type='password' class='form-control')
               fieldset.form-group
                 label Input file
  -              input(type="file" class="form-control")
  +              input(type='file' class='form-control')
               fieldset.form-group
                 .checkbox
                   label
  -                  input#checkbox1(type="checkbox")
  +                  input#checkbox1(type='checkbox')
                     |  Checkbox 1
                 .checkbox
                   label
  -                  input#checkbox2(type="checkbox")
  +                  input#checkbox2(type='checkbox')
                     |  Checkbox 2
                 .checkbox
                   label
  -                  input#checkbox3(type="checkbox")
  +                  input#checkbox3(type='checkbox')
                     |  Checkbox 3
               fieldset.form-group
                 .radio
                   label
  -                  input#radio1(type="radio" name="radio" value="a")
  +                  input#radio1(type='radio' name='radio' value='a')
                     |  Radio 1
                 .radio
                   label
  -                  input#radio2(type="radio" name="radio" value="b")
  +                  input#radio2(type='radio' name='radio' value='b')
                     |  Radio 2
                 .radio
                   label
  -                  input#radio3(type="radio" name="radio" value="c")
  +                  input#radio3(type='radio' name='radio' value='c')
                     |  Radio 3
             h3#selects Selects
             form
               fieldset.form-group
  -              label(for="select") Select
  +              label(for='select') Select
                 select#select.form-control
                   option Option 1
                   option Option 2
                   option Option 3
  -                option(selected="selected") Selected Option
  -                optgroup(label="Option Group")
  +                option(selected='selected') Selected Option
  +                optgroup(label='Option Group')
                     option Option Group 1
                     option Option Group 2
                     option Option Group 3
               fieldset.form-group
  -              label(for="select-multiple") Select multiple
  -              select#select-multiple.form-control(multiple="multiple" size="4")
  +              label(for='select-multiple') Select multiple
  +              select#select-multiple.form-control(multiple='multiple' size='4')
                   option Option 1
                   option Option 2
                   option Option 3
  -                option(selected="selected") Selected Option
  +                option(selected='selected') Selected Option
             h3#forms-others Other Form Elements
             form
               fieldset.form-group
                 label Button
  -              button#btn.btn.btn-primary(type="button") Button
  -            fieldset.form-group
  -              label(for="textarea") Textarea
  +              button#btn.btn.btn-primary(type='button') Button
  +            fieldset.form-group
  +              label(for='textarea') Textarea
                 textarea#textarea.form-control Textarea
         aside.hidden-md-down.col-lg-3.c-sidebar
           nav.navbar
             h2.c-sidebar__title Contents
             ul.nav.c-sidebar__nav
               li.nav-item.dropdown
  -              a.nav-link.dropdown-toggle(href="#h1") Headings
  -              ul
  -                li: a.dropdown-item(href="#h2") Heading 2
  -                li: a.dropdown-item(href="#h3") Heading 3
  -                li: a.dropdown-item(href="#h4") Heading 4
  -            li.nav-item.dropdown
  -              a.nav-link.dropdown-toggle(href="#basic-html-tags") Basic HTML Tags
  -              ul
  -                li: a.dropdown-item(href="#lists") Lists
  -                li: a.dropdown-item(href="#tables") Tables
  -                li: a.dropdown-item(href="#code") Code
  -            li.nav-item.dropdown
  -              a.nav-link.dropdown-toggle(href="#other-w3c-elements") Other W3C Elements
  -              ul
  -                li: a.dropdown-item(href="#svg") SVG
  -                li: a.dropdown-item(href="#mathml") MathML
  -            li.nav-item.dropdown
  -              a.nav-link.dropdown-toggle(href="#forms") Forms
  -              ul
  -                li: a.dropdown-item(href="#inputs") Inputs
  -                li: a.dropdown-item(href="#selects") Selects
  -                li: a.dropdown-item(href="#forms-others") Other Form Elements
  +              a.nav-link.dropdown-toggle(href='#h1') Headings
  +              ul
  +                li: a.dropdown-item(href='#h2') Heading 2
  +                li: a.dropdown-item(href='#h3') Heading 3
  +                li: a.dropdown-item(href='#h4') Heading 4
  +            li.nav-item.dropdown
  +              a.nav-link.dropdown-toggle(href='#basic-html-tags') Basic HTML Tags
  +              ul
  +                li: a.dropdown-item(href='#lists') Lists
  +                li: a.dropdown-item(href='#tables') Tables
  +                li: a.dropdown-item(href='#code') Code
  +            li.nav-item.dropdown
  +              a.nav-link.dropdown-toggle(href='#other-w3c-elements') Other W3C Elements
  +              ul
  +                li: a.dropdown-item(href='#svg') SVG
  +                li: a.dropdown-item(href='#mathml') MathML
  +            li.nav-item.dropdown
  +              a.nav-link.dropdown-toggle(href='#forms') Forms
  +              ul
  +                li: a.dropdown-item(href='#inputs') Inputs
  +                li: a.dropdown-item(href='#selects') Selects
  +                li: a.dropdown-item(href='#forms-others') Other Form Elements
       footer.container.footer
         p
  -        a.link(href="https://github.com/ryanvfung/html") Ryan Fung's HTML Template 5.2 Hydrazone
  +        a.link(href='https://github.com/ryanvfung/html') Ryan Fung's HTML Template 5.2 Hydrazone
           |  (Valid 
  -        a.link(href="https://validator.nu/?doc=https%3A%2F%2Fryanvfung.github.io%2Fprojects%2Fhtml%2Fz52.html&parser=html5&laxtype=yes") HTML5
  +        a.link(href='https://validator.nu/?doc=https%3A%2F%2Fryanvfung.github.io%2Fprojects%2Fhtml%2Fz52.html&parser=html5&laxtype=yes') HTML5
           |  &amp; 
  -        a.link(href="https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fryanvfung.github.io%2Fprojects%2Fhtml%2Fz52.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en") CSS3
  +        a.link(href='https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fryanvfung.github.io%2Fprojects%2Fhtml%2Fz52.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en') CSS3
           | )
         p Copyright &copy; 2010&ndash;2015 Ryan Fung. All rights reserved.
  
positive.code:           p The #[code code] tag wraps blocks of #[code code].
            p The #[code kbd] tag instructs users to open new tabs with #[kbd #[kbd Ctrl] + #[kbd T]]
            p The #[code pre] tag wraps the following preformatted block of JavaScript:
            pre document.print("Hello World!");
            pre.c-code-block: code
              <span>&lt;!doctype html&gt;</span>
              <span>&lt;<span style="color:#b58900;">html</span>&gt;&lt;<span style="color:#b58900;">head</span>&gt;</span>
              <span>&lt;/<span style="color:#b58900;">head</span>&gt;&lt;<span style="color:#b58900;">body</span>&gt;</span>
              <span>&lt;/<span style="color:#b58900;">body</span>&gt;&lt;/<span style="color:#b58900;">html</span>&gt;</span>
            pre.c-cmd-block git clone git@github.com:ryanvfung/html.git
          section
            h2#other-w3c-elements Other W3C Elements
            h3#svg SVG Demo
            p: svg(width="200px" height="230px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink")
              g
                //- circle/(cx="100" cy="100" r="100" fill="#000")
                //- circle/(cx="100" cy="100" r="95" fill="#ff0")
                //- circle/(cx=" 60" cy=" 60" r="10" fill="#000")
                //- circle/(cx="140" cy=" 60" r="10" fill="#000")
                //- ellipse/(cx="100"cy="110" rx="40" ry="20" fill="#fcf" stroke="#000" stroke-width="0.5")
                //- circle/(cx="080" cy="110" r=" 6" fill="#000")
                //- circle/(cx="120" cy="110" r=" 6" fill="#000")
                <circle cx="100" cy="100" r="100" fill="#000" />
                <circle cx="100" cy="100" r="95" fill="#ff0" />
                <circle cx="060" cy="60" r="10" fill="#000" />
                <circle cx="140" cy="60" r="10" fill="#000" />
                <ellipse cx="100" cy="110" rx="40" ry="20" fill="#fcf" stroke="#000" stroke-width="0.5" />
                <circle cx="080" cy="110" r="6" fill="#000" />
                <circle cx="120" cy="110" r="6" fill="#000" />
              g
                //- path/#smile(stroke="black" stroke-width="5" fill="none" d="M 50,147 s 50,50 100,0")
                <path id="smile" stroke="black" stroke-width="5" fill="none" d="M 50,147 s 50,50 100,0" />
              defs
                //- path/#top(d="M 0,100 s 200,-200 200,200")
                //- path/#textend(d="M 150,205 L 150,223")
                <path id="top" d="M 0,100 s 200,-200 200,200" />
                <path id="textend" d="M 150,205 L 150,223" />
              g
                text: textPath(xlink:href="#smile" startOffset="50%" text-anchor="middle"): tspan(dy="-5") M.o.u.s.t.a.c.h.e
                text(x="100" y="220" rotate="10" text-anchor="middle")
                  | <tspan font-weight="bold" fill="#f60">Ryan</tspan><tspan fill="#ccc">&#39;s Smiley</tspan><tspan fill="transparent">:D</tspan>
                text(fill="#000")
                  textPath(xlink:href="#textend" fill="#ccc")
                    | <tspan dy="-2" dx="3">:</tspan><tspan dy="2">D</tspan>
  
            h3#mathml MathML Demo
            h4 Quadratic Equation
            p The solution to the equation:
              math(xmlns="http://www.w3.org/1998/Math/MathML" alttext="ax&sup2;+bx+c=0"): mstyle(displaystyle="true")
                mi a
                | #[msup: #[mi x] #[mn 2]]
                | #[mo +] #[mi b] #[mo +] #[mi c] #[mo =] #[mn 0]
              | is given by the equation:
              math(xmlns="http://www.w3.org/1998/Math/MathML" alttext="x=(-b&plusmn;&radic;[b&sup2; -4ac]) / (2a)"): mstyle(displaystyle="true")
                | #[mi x] #[mo =]
                mfrac
                  mrow
                    | #[mo(form="prefix") -] #[mi b] #[mo &plusmn;]
                    msqrt
                      | #[msup: #[mi b] #[mn 2]]
                      | #[mo -] #[mn 4] #[mi a] #[mi c]
  
negative.code:         section
            h2#basic-html-tags Basic HTML Tags
            p.offset-anchor#a
              | Click #[a(href='#a') here] to go to another website.
              |  #[a.link(href='#a') Or this link]
              |  #[a.btn.btn-sm.btn-primary(href='#a') Or this button]
  
            h3#lists Lists
            ul
  