enable syntax highlighting for source plugin

examples/dev/webpack.dev.babel.js

@@ -5,6 +5,7 @@ import CarteBlanche from '../../webpack-plugin/index';
 import autoprefixer from 'autoprefixer';
 
 import ReactPlugin from '../../plugins/react/dist/plugin';
+import SourcePlugin from '../../plugins/source/plugin';
 
 export default {
   devtool: 'inline-source-map',
@@ -29,6 +30,7 @@ export default {
       componentRoot: './src/components/',
       plugins: [
         new ReactPlugin(),
+        new SourcePlugin(),
       ],
     }),
   ],
@@ -45,6 +47,12 @@ export default {
           path.join(__dirname, '../../webpack-plugin'),
           path.join(__dirname, '../../plugins'),
         ],
+      }, {
+        test: /highlight.*\.css/,
+        loader: 'style!css!postcss',
+        include: [
+          path.join(__dirname, '../../plugins'),
+        ],
       }, {
         test: /\.css/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[local]__[path][name]__[hash:base64:5]!postcss-loader', // eslint-disable-line max-len
@@ -53,6 +61,9 @@ export default {
           path.join(__dirname, '../../webpack-plugin'),
           path.join(__dirname, '../../plugins'),
         ],
+        exclude: [
+          /highlight.*\.css/,
+        ],
       }, {
         test: /\.(png|jpg|gif)$/,
         loaders: ['url?limit=10000'],

package.json

@@ -119,6 +119,7 @@
     "file-loader": "^0.9.0",
     "flow-bin": "^0.27.0",
     "fs": "0.0.2",
+    "highlight.js": "^9.5.0",
     "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.19.0",
     "immutable": "^3.8.1",

plugins/source/component.js

@@ -1,5 +1,15 @@
 import React from 'react';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github-gist.css';
 
 export default function sourceFrontend(frontendData, pluginData) {
-  return (<pre>{pluginData.source}</pre>);
+  const { value, language } = hljs.highlightAuto(pluginData.source);
+  return (
+    <div style={{ width: '90%', margin: 'auto' }}>
+      <pre
+        className={`hljs ${language}`}
+        dangerouslySetInnerHTML={{ __html: value }}
+      />
+    </div>
+  );
 }

plugins/source/package.json

@@ -34,7 +34,8 @@
   },
   "dependencies": {
     "carte-blanche": "^0.3.0",
-    "webpack": ">=1 <3 || ^2.1.0-beta",
-    "react": "^15.0.1"
+    "highlight.js": "^9.5.0",
+    "react": "^15.0.1",
+    "webpack": ">=1 <3 || ^2.1.0-beta"
   }
 }