Syntax Highlighting
Great for showcasing your code!

Usage Example

HTML

<pre class="line-numbers"><code class="language-markup">
HTML code..
</code></pre>

CSS

<pre class="line-numbers"><code class="language-css">
CSS code..
</code></pre>

Javascript

<pre class="line-numbers"><code class="language-javascript">
Javascript code..
</code></pre>

PHP

<pre class="line-numbers"><code class="language-php">
PHP code..
</code></pre>

HTML Template's Structure

<!-- Body -->
<body>
    <!-- Page Container -->
    <div id="page-container" class="sidebar-full">
        <!-- Sidebar -->
        <div id="sidebar">
            Sidebar Content
        </div>
        <!-- END Sidebar -->

        <!-- Main Container -->
        <div id="main-container">
            <!-- Header -->
            <header class="navbar navbar-default">
                Header Content
            </header>
            <!-- END Header -->

            <!-- Page Content -->
            <div id="page-content">
                Main Content
            </div>
            <!-- END Page Content -->

            <!-- Footer -->
            <footer>
                Footer Content
            </footer>
            <!-- END Footer -->
        </div>
        <!-- END Main Container -->
    </div>
    <!-- END Page Container -->
</body>
<!-- END Body -->

PHP Dummy Code

<?php
class App {
    function home() {
        // ...
    }

    function profile() {
        // ...
    }

    function settings() {
        // ...
    }
}

CSS Stylesheet Structure

/*
=================================================================
(#shortcode) SECTION
=================================================================
*/

/* Sub section 1 */
selector {
}

/* Sub section 2 */
selector {
}

/*
=================================================================
(#shortcode) SECTION
=================================================================
*/

/* Sub section 1 */
selector {
}

/* Sub section 2 */
selector {
}

Javascript Scroll to top functionality

/* Scroll to top functionality */
var scrollToTop = function() {
    // Get link
    var link = $('#to-top');

    $(window).scroll(function(){
        // If the user scrolled a bit (150 pixels) show the link
        if ($(this).scrollTop() > 150) {
            link.fadeIn(100);
        } else {
            link.fadeOut(100);
        }
    });

    // On click get to top
    link.click(function(){
        $('html, body').animate({ scrollTop: 0 }, 400);

        return false;
    });
};