Adding to the documentation

build.js

@@ -5,6 +5,7 @@ var extname = require('path').extname;
 var inPlace = require('metalsmith-in-place');
 var layouts = require('metalsmith-layouts');
 var markdown = require('metalsmith-markdown');
+var highlights = require('metalsmith-metallic');
 var metadata = require('metalsmith-metadata');
 var Metalsmith = require('metalsmith');
 var mkdir = require('mkdirp');
@@ -48,6 +49,7 @@ function build(fn){
     engine: 'swig',
     pattern: '**/*.md'
   }));
+  m.use(highlights());
   m.use(markdown({
     smartypants: true,
     smartLists: true

build/build.css

@@ -753,6 +753,34 @@ hr:nth-of-type(6) {
   background-image: url("metalsmith.io/images/divider-6.png");
 }
 
+hr:nth-of-type(7) {
+  background-image: url("metalsmith.io/images/divider-1.png");
+}
+
+hr:nth-of-type(8) {
+  background-image: url("metalsmith.io/images/divider-2.png");
+}
+
+hr:nth-of-type(9) {
+  background-image: url("metalsmith.io/images/divider-3.png");
+}
+
+hr:nth-of-type(10) {
+  background-image: url("metalsmith.io/images/divider-4.png");
+}
+
+hr:nth-of-type(11) {
+  background-image: url("metalsmith.io/images/divider-5.png");
+}
+
+hr:nth-of-type(12) {
+  background-image: url("metalsmith.io/images/divider-6.png");
+}
+
+hr:nth-of-type(13) {
+  background-image: url("metalsmith.io/images/divider-1.png");
+}
+
 /**
  * Symbolset.
  */

build/build.js

@@ -193,49 +193,49 @@ require.relative = function(parent) {
 
 
 require.register("metalsmith.io/index.js", Function("exports, require, module",
-"\n\
-var input = document.querySelector('.Plugin-filter-input');\n\
-var plugins = [];\n\
-\n\
-/**\n\
- * Build index.\n\
- */\n\
-\n\
-[].forEach.call(document.querySelectorAll('.Plugin-list .Plugin'), function (el) {\n\
-  plugins.push({\n\
-    el: el,\n\
-    title: el.querySelector('.Plugin-title').textContent.toLowerCase(),\n\
-    description: el.querySelector('.Plugin-description').textContent.toLowerCase()\n\
-  });\n\
-});\n\
-\n\
-/**\n\
- * Filter to start, in case there is some text in the search input, which may\n\
- * happen when clicking \"back\" in the browser. And then set a listener for\n\
- * future filtering.\n\
- */\n\
-\n\
-filter();\n\
-input.addEventListener('keyup', filter);\n\
-\n\
-/**\n\
- * Filter plugins.\n\
- */\n\
-\n\
-function filter() {\n\
-  var value = input.value.toLowerCase();\n\
-\n\
-  plugins.forEach(function(plugin){\n\
-    var el = plugin.el;\n\
-    var title = plugin.title;\n\
-    var desc = plugin.description;\n\
-    plugin.el.style.display = '';\n\
-\n\
-    if (!value) return;\n\
-    if (!~title.indexOf(value) && !~desc.indexOf(value)) {\n\
-      el.style.display = 'none';\n\
-    }\n\
-  });\n\
+"\r\n\
+var input = document.querySelector('.Plugin-filter-input');\r\n\
+var plugins = [];\r\n\
+\r\n\
+/**\r\n\
+ * Build index.\r\n\
+ */\r\n\
+\r\n\
+[].forEach.call(document.querySelectorAll('.Plugin-list .Plugin'), function (el) {\r\n\
+  plugins.push({\r\n\
+    el: el,\r\n\
+    title: el.querySelector('.Plugin-title').textContent.toLowerCase(),\r\n\
+    description: el.querySelector('.Plugin-description').textContent.toLowerCase()\r\n\
+  });\r\n\
+});\r\n\
+\r\n\
+/**\r\n\
+ * Filter to start, in case there is some text in the search input, which may\r\n\
+ * happen when clicking \"back\" in the browser. And then set a listener for\r\n\
+ * future filtering.\r\n\
+ */\r\n\
+\r\n\
+filter();\r\n\
+input.addEventListener('keyup', filter);\r\n\
+\r\n\
+/**\r\n\
+ * Filter plugins.\r\n\
+ */\r\n\
+\r\n\
+function filter() {\r\n\
+  var value = input.value.toLowerCase();\r\n\
+\r\n\
+  plugins.forEach(function(plugin){\r\n\
+    var el = plugin.el;\r\n\
+    var title = plugin.title;\r\n\
+    var desc = plugin.description;\r\n\
+    plugin.el.style.display = '';\r\n\
+\r\n\
+    if (!value) return;\r\n\
+    if (!~title.indexOf(value) && !~desc.indexOf(value)) {\r\n\
+      el.style.display = 'none';\r\n\
+    }\r\n\
+  });\r\n\
 }//@ sourceURL=metalsmith.io/index.js"
 ));
 

index.css

@@ -122,6 +122,34 @@ hr:nth-of-type(6) {
   background-image: url('images/divider-6.png');
 }
 
+hr:nth-of-type(7) {
+  background-image: url('images/divider-1.png');
+}
+
+hr:nth-of-type(8) {
+  background-image: url('images/divider-2.png');
+}
+
+hr:nth-of-type(9) {
+  background-image: url('images/divider-3.png');
+}
+
+hr:nth-of-type(10) {
+  background-image: url('images/divider-4.png');
+}
+
+hr:nth-of-type(11) {
+  background-image: url('images/divider-5.png');
+}
+
+hr:nth-of-type(12) {
+  background-image: url('images/divider-6.png');
+}
+
+hr:nth-of-type(13) {
+  background-image: url('images/divider-1.png');
+}
+
 /**
  * Symbolset.
  */

index.html

@@ -16,6 +16,7 @@
   <meta property="og:image" content="http://www.metalsmith.io/metalsmith.io/images/facebook-image.png" />
   <meta name="google-site-verification" content="2RKFuZol3mkMgto2Y0TUZUmzMpWZ-Ck-7HjocBHpJtE" />
   <link rel="icon" href="/metalsmith.io/images/favicon.png">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/tomorrow.min.css">
   <link rel="stylesheet" href="/build.css">
   <link rel="stylesheet" href="//cloud.typography.com/6692672/678184/css/fonts.css">
   <link rel="stylesheet" href="//cdn.symbolset.com/94440cd0456394a198fb9c3302ad80fe007e5eff/symbolset.css">

package.json

@@ -13,6 +13,7 @@
     "metalsmith-layouts": "^1.4.1",
     "metalsmith-markdown": "^0.2.1",
     "metalsmith-metadata": "0.0.1",
+    "metalsmith-metallic": "^1.0.0",
     "mkdirp": "^0.3.5",
     "myth": "^0.1.0",
     "swig": "^1.3.2"