add syntax highlighting

register.js

@@ -32,10 +32,22 @@ var _pretty = require('pretty');
 
 var pretty = _interopRequireWildcard(_pretty);
 
+var _reactSyntaxHighlighter = require('react-syntax-highlighter');
+
+var _javascript = require('react-syntax-highlighter/languages/hljs/javascript');
+
+var _javascript2 = _interopRequireDefault(_javascript);
+
+var _docco = require('react-syntax-highlighter/dist/styles/hljs/docco');
+
+var _docco2 = _interopRequireDefault(_docco);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+Light.registerLanguage('javascript', _javascript2.default);
+
 var styles = {
   markupPanel: {
     margin: 10,
@@ -103,8 +115,8 @@ var StaticMarkup = function (_React$Component) {
           active = _props$active === undefined ? true : _props$active;
 
       return active ? _react2.default.createElement(
-        'div',
-        { style: styles.markupPanel },
+        _reactSyntaxHighlighter.Light,
+        { language: 'html', style: _docco2.default },
         pretty(markup)
       ) : null;
     }

src/register.js

@@ -2,6 +2,11 @@ import React from 'react';
 import addons from '@storybook/addons';
 import * as pretty from 'pretty';
 
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import js from 'react-syntax-highlighter/languages/hljs/javascript';
+import docco from 'react-syntax-highlighter/dist/styles/hljs/docco';
+Light.registerLanguage('javascript', js);
+
 const styles = {
   markupPanel: {
     margin: 10,
@@ -46,9 +51,9 @@ class StaticMarkup extends React.Component {
     // have active property.
     const { active = true } = this.props
     return active ? (
-      <div style={styles.markupPanel}>
-        { pretty(markup) }
-      </div>
+      <SyntaxHighlighter language='html' style={docco}>
+        {pretty(markup)}
+      </SyntaxHighlighter>
     ) : null;
   }