Adds Syntax highlighting for code blocks. Closes #375

- Using the Prism lib
 - Moved Prism from the Component page only to the common layout
 - Transalte prism "markup" annotation to "html"
 - Translate markdown code blocks class names to Prism code block class names

docs/_assets/main.css

@@ -10,6 +10,7 @@ html > body {
 }
 .docs-layout pre {
   padding: 16px;
+  padding-right: 65px;
 }
 .docs-layout code:before,
 .docs-layout code:after {
@@ -26,6 +27,9 @@ html > body {
   padding: 0px;
   font-size: 100%;
 }
+pre[class*=language-]>code[data-language="markup"]::before {
+  content: "html";
+}
 .docs-layout-header {
   height: 33vh;
   flex-shrink: 0;

docs/_templates/components.html

@@ -4,7 +4,6 @@
 <link href="{{page.include_prefix}}assets/components.css" rel="stylesheet">
 <script src="{{page.include_prefix}}assets/components.js"></script>
 <link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">
-<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" rel="stylesheet">
 
 <div class="mdl-components mdl-js-components">
   <aside class="mdl-components__nav">
@@ -45,6 +44,4 @@
 </main>
 </div>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
-
 {% endblock %}

docs/_templates/layout.html

@@ -39,6 +39,7 @@
       rel="stylesheet">
 
     <!-- Page styles -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
     <link rel="stylesheet" href="{{page.include_prefix}}material.min.css">
     <link rel="stylesheet" href="{{page.include_prefix}}assets/main.css">
     <script src="{{page.include_prefix}}material.min.js"></script>
@@ -111,6 +112,8 @@
       ga('create', 'UA-XXXXX-X', 'auto');
       ga('send', 'pageview');
     </script>
+    <!-- Enable Prism syntax highlighting -->=
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
     <!-- Built with love using Material Design Lite -->
   </body>
 </html>

gulpfile.js

@@ -311,6 +311,10 @@ gulp.task('pages', ['components'], function() {
     .pipe($.frontMatter({property: 'page', remove: true}))
     .pipe($.marked())
     .pipe(applyTemplate())
+    /* Replacing code blocks class name to match Prism's. */
+    .pipe($.replace("class=\"lang-", "class=\"language-"))
+    /* Translate html code blocks to "markup" because that's what Prism uses. */
+    .pipe($.replace("class=\"language-html", "class=\"language-markup"))
     .pipe($.rename(function(path) {
       if (path.basename !== 'index') {
         path.dirname = path.basename;

src/demos.css

@@ -35,4 +35,7 @@
 
 .demo-code {
   width: 100%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
 }