anchor.diff:            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 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>
  +            <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")
  +          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#smiley-face
  +              //- 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
  -              //- 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" />
  +              //- 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
  -              //- 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>
  +              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")
  +            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")
  +            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;]
  +                  | #[mo(form='prefix') -] #[mi b] #[mo &plusmn;]
                     msqrt
                       | #[msup: #[mi b] #[mn 2]]
                       | #[mo -] #[mn 4] #[mi a] #[mi c]
  
positive.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
  
negative.code:           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')
              fieldset.form-group
                label Input file
                input(type='file' class='form-control')
              fieldset.form-group
                .checkbox
                  label
                    input#checkbox1(type='checkbox')
                    |  Checkbox 1
                .checkbox
                  label
                    input#checkbox2(type='checkbox')
                    |  Checkbox 2
                .checkbox
                  label
                    input#checkbox3(type='checkbox')
                    |  Checkbox 3
              fieldset.form-group
                .radio
                  label
                    input#radio1(type='radio' name='radio' value='a')
                    |  Radio 1
                .radio
                  label
                    input#radio2(type='radio' name='radio' value='b')
                    |  Radio 2
                .radio
                  label
                    input#radio3(type='radio' name='radio' value='c')
                    |  Radio 3
            h3#selects Selects
            form
              fieldset.form-group
                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 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')
                  option Option 1
                  option Option 2
                  option Option 3
                  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
                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
      footer.container.footer
        p
          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
          |  &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
          | )
        p Copyright &copy; 2010&ndash;2015 Ryan Fung. All rights reserved.
  