### Styling HTML `<pre> <code></code> </pre>` and inline `<code></code>`

- Use the provided classes to style HTML, CSS and Javascript used inside inline `code` or `pre` tags
- To keep adding line numbers, add `<i></i>` at the start of each line and then add your code and space your code as you always do inside a `pre` tag. Markup for an empty line with line number:

        <!-- Markup for an empty line with line number:-->
        <pre class='js'>
             <code>
                <i></i> // empty line
             </code>
        </pre>

  Result:

         // empty line

### Detailed Example: Javascript

- Add `class='js'` to your `pre` tag
- Add `<i></i>` at the start of each line to get line numbers
- Wrap these javascript vocabulary with a span tags and add use these words as class names to style them: `regex` `punctuation` `function` `comment` `keyword` `operator` `number`

        <!-- Markup for a single line of javascript:-->
        <pre class='js'>
             <code>
                <i></i> <span class="keyword">var</span> <span class="function">x</span> <span class="operator">=</span> <span class="keyword">function</span><span class="punctuation">() {};</span>
             </code>
        </pre>

  Result:

         var x = function() {};

### Example: Javascript

        // Styling javascript keywords, operators, functions, string, punctuations and comments and much more ...
        var gulp = require('gulp'),
            sass = require('gulp-ruby-sass');
        // Using number
        var num = 45;
        // Using regex
        var re = /ab+c/;

        // No style
        $(window).scroll(function () {
            if ($(this).scrollTop() > height) {
                buttons.addClass('stickyBtn');
            } else {
                buttons.removeClass('stickyBtn');
            }
        });

### Example: HTML

        <!-- HTML -->
        <h1>Heading</h1>
        <!-- HTML comment -->

        <div id="photoCollection">
          <div data-src="img/img1.jpg">
              <img src="img/img1_thumb.jpg" />
              <time datetime="2014-04-23"></time>
          </div>
        </div>
        <!-- No style  -->
        <head>
            <meta charset="utf-8">
            <title>Welcome to Vecta Corp.>/title>
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            <link href="comp.css" rel="stylesheet">
        </head>

### Example: CSS

        /*  Styling CSS rules */
        /* CSS comment */
        pre code i::before {
            counter-increment: linenumber;
            content: counter(linenumber);
            display: inline-block;
            padding-right: 1em;
            margin-right: 1em;
            color: gray;
            width: 1em;
            text-align: right;
        }

        /* CSS rule with no style */
        pre code {
            line-height: 2;
            direction: ltr;
            /*    text-align: left;*/
            white-space: pre;
            word-spacing: normal;
            word-break: normal;
            word-wrap: normal;
        }