Set up highlighting

This probably needs to be extracted out of this project so other people
can use highlighting with remark too. That's going to take some thought,
though.

demo/main.css

@@ -68,11 +68,6 @@ article h2 {
     margin-top: 2em;
 }
 
-pre {
-    background: #fafefe;
-    padding: 0.5em;
-}
-
 article .description {
     margin: 1em;
     padding: 1em;

lib/render.jsx

@@ -5,6 +5,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/server';
 import remark from 'remark';
 import reactRenderer from 'remark-react';
+import Lowlight from 'react-lowlight';
+
+import js from 'highlight.js/lib/languages/javascript';
+
+Lowlight.registerLanguage('js', js);
 
 export default function (rootPath, context, demoTemplate) {
   demoTemplate = demoTemplate || '';
@@ -19,8 +24,20 @@ export default function (rootPath, context, demoTemplate) {
     demonstration: demoTemplate,
     documentation: ReactDOM.renderToStaticMarkup(
       <div key="documentation">
-        {remark().use(reactRenderer).process(readme)}
+        {remark().use(reactRenderer, {
+          remarkReactComponents: {
+            code: Code
+          }
+        }).process(readme)}
       </div>
     )
   };
 }
+
+const Code = ({className, children}) => (
+  <Lowlight language={className.split('-')[1]} value={children} />
+);
+Code.propTypes = {
+  className: React.PropTypes.string,
+  children: React.PropTypes.node
+};

package.json

@@ -63,6 +63,7 @@
     "purecss": "^0.6.0",
     "react-addons-test-utils": "^0.14.7",
     "react-ghfork": "^0.3.2",
+    "react-lowlight": "^1.0.0",
     "remark": "^4.1.2",
     "remark-react": "^2.0.0",
     "style-loader": "^0.13.1",