Added code highlighting (client side).

Author: neogeek

templates/bootstrap.hbs

@@ -29,27 +29,14 @@
     text-align: center;
 }
 
+pre .hljs {
+    padding: 0;
+    background: none;
+}
+
 </style>
 <script>
-
-(function () {
-
-    'use strict';
-
-    var css = document.createElement('link'),
-        protocol = window.location.protocol;
-
-    if (protocol === 'file:') {
-        protocol = 'http:';
-    }
-
-    css.setAttribute('rel', 'stylesheet');
-    css.setAttribute('href', protocol + '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
-
-    document.head.appendChild(css);
-
-}());
-
+(function(e,t,i){"use strict";var s=e.location.protocol==="file:"?"http:":e.location.protocol,c=["//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css","//cdn.jsdelivr.net/highlight.js/8.0/styles/github.css","//cdn.jsdelivr.net/highlight.js/8.0/highlight.min.js","//cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js"];c.forEach(function(e){var o;if(e.match(/\.js$/)){o=t.createElement("script");o.setAttribute("src",s+e)}else if(e.match(/\.css$/)){o=t.createElement("link");o.setAttribute("rel","stylesheet");o.setAttribute("href",s+e)}o.addEventListener("load",function(){if(this.hasAttribute("src")){c.splice(c.indexOf(this.getAttribute("src")),1)}else if(this.hasAttribute("href")){c.splice(c.indexOf(this.getAttribute("href")),1)}if(!c.length){if($.isReady){i()}else{$(document).ready(i)}}});t.head.appendChild(o)})})(window,document,function(){var e=window.location.hash,t=$('[id="'+e.replace(/#/,"")+'"]'),i=$(".code"),s=$(".scope-private"),c=$(".toggle-code-blocks");$toggle_private=$(".toggle-private");c.on("click",function(){if(c.is(":checked")){i.show()}else{i.hide()}});$toggle_private.on("click",function(){if($toggle_private.is(":checked")){s.show()}else{s.hide()}});i.hide();s.hide();if(t.length&&!t.is(":visible")){$toggle_private.trigger("click")}$(".examples pre code, .code pre code").each(function(){hljs.highlightBlock(this)})});
 </script>
 </head>
 
@@ -207,7 +194,7 @@
 
                                     <h3>Code</h3>
 
-                                    <pre>{{code}}</pre>
+                                    <pre><code>{{code}}</code></pre>
 
                                 </section>
 
@@ -249,50 +236,5 @@
 
 </footer>
 
-<script src="http://cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js"></script>
-<script>
-
-(function () {
-
-    var hash = window.location.hash,
-        $hash_elem = $('[id="' + hash.replace(/#/, '') + '"]'),
-        $code_block = $('.code'),
-        $scope_private = $('.scope-private'),
-        $toggle_code_blocks = $('.toggle-code-blocks')
-        $toggle_private = $('.toggle-private');
-
-    $toggle_code_blocks.on('click', function () {
-
-        if ($toggle_code_blocks.is(':checked')) {
-            $code_block.show();
-        } else {
-            $code_block.hide();
-        }
-
-    });
-
-    $toggle_private.on('click', function () {
-
-        if ($toggle_private.is(':checked')) {
-            $scope_private.show();
-        } else {
-            $scope_private.hide();
-        }
-
-    });
-
-    $code_block.hide();
-    $scope_private.hide();
-
-    if ($hash_elem.length && !$hash_elem.is(':visible')) {
-
-        $toggle_private.trigger('click');
-
-    }
-
-}());
-
-</script>
-
 </body>
 </html>

templates/bootstrap.js

@@ -0,0 +1,104 @@
+(function (w, d, f) {
+
+    'use strict';
+
+    var protocol = w.location.protocol === 'file:' ? 'http:' : w.location.protocol,
+        resource = [
+            '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css',
+            '//cdn.jsdelivr.net/highlight.js/8.0/styles/github.css',
+            '//cdn.jsdelivr.net/highlight.js/8.0/highlight.min.js',
+            '//cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js'
+        ];
+
+    resource.forEach(function (url) {
+
+        var tag;
+
+        if (url.match(/\.js$/)) {
+
+            tag = d.createElement('script');
+            tag.setAttribute('src', protocol + url);
+
+        } else if (url.match(/\.css$/)) {
+
+            tag = d.createElement('link');
+            tag.setAttribute('rel', 'stylesheet');
+            tag.setAttribute('href', protocol + url);
+
+        }
+
+        tag.addEventListener('load', function () {
+
+            if (this.hasAttribute('src')) {
+
+                resource.splice(resource.indexOf(this.getAttribute('src')), 1);
+
+            } else if (this.hasAttribute('href')) {
+
+                resource.splice(resource.indexOf(this.getAttribute('href')), 1);
+
+            }
+
+            if (!resource.length) {
+
+                if ($.isReady) {
+
+                    f();
+
+                } else {
+
+                    $(document).ready(f);
+
+                }
+
+            }
+
+        });
+
+        d.head.appendChild(tag);
+
+    });
+
+}(window, document, function () {
+
+    var hash = window.location.hash,
+        $hash_elem = $('[id="' + hash.replace(/#/, '') + '"]'),
+        $code_block = $('.code'),
+        $scope_private = $('.scope-private'),
+        $toggle_code_blocks = $('.toggle-code-blocks')
+        $toggle_private = $('.toggle-private');
+
+    $toggle_code_blocks.on('click', function () {
+
+        if ($toggle_code_blocks.is(':checked')) {
+            $code_block.show();
+        } else {
+            $code_block.hide();
+        }
+
+    });
+
+    $toggle_private.on('click', function () {
+
+        if ($toggle_private.is(':checked')) {
+            $scope_private.show();
+        } else {
+            $scope_private.hide();
+        }
+
+    });
+
+    $code_block.hide();
+    $scope_private.hide();
+
+    if ($hash_elem.length && !$hash_elem.is(':visible')) {
+
+        $toggle_private.trigger('click');
+
+    }
+
+    $('.examples pre code, .code pre code').each(function() {
+        hljs.highlightBlock(this);
+    });
+
+}));