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

Detailed Example: Javascript

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;
    }