ProUI

Loading..

Syntax Highlighting
Great for showcasing your code!

UsageExample

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>

HTMLTemplate's Structure 

<!-- Body --><body>    <!-- Page Wrapper -->    <div id="page-wrapper">        <!-- Page Container -->        <div id="page-container">            <!-- Alternative Sidebar -->            <div id="sidebar-alt">                Alternative Sidebar Content            </div>            <!-- END Alternative Sidebar -->            <!-- Main Sidebar -->            <div id="sidebar">                Main Sidebar Content            </div>            <!-- END Main 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 -->    </div>    <!-- END Page Wrapper --></body><!-- END Body -->

PHPDummy Code 

<?phpclass App {    function home() {        // ...    }    function profile() {        // ...    }    function settings() {        // ...    }}

CSSStylesheet Structure 

/*=================================================================(#shortcode) SECTION=================================================================*//* Sub section 1 */selector {}/* Sub section 2 */selector {}/*=================================================================(#shortcode) SECTION=================================================================*//* Sub section 1 */selector {}/* Sub section 2 */selector {}

JavascriptScroll to top functionality 

/* Scroll to top functionality */var scrollToTop = function() {    // Get link    var link = $('#to-top');    var windowW = window.innerWidth                    || document.documentElement.clientWidth                    || document.body.clientWidth;    $(window).scroll(function(){        // If the user scrolled a bit (150 pixels) show the link in large resolutions        if (($(this).scrollTop() >150) && (windowW >991)) {            link.fadeIn(100);        } else {            link.fadeOut(100);        }    });    // On click get to top    link.click(function(){        $('html, body').animate({ scrollTop: 0 }, 400);        return false;    });};