Added code highlighting

src/assets/styles/github-gist.scss

@@ -0,0 +1,73 @@
+:global {
+  /**
+   * GitHub Gist Theme
+   * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+   */
+
+  .hljs {
+    display: block;
+    background: white;
+    padding: 0.5em;
+    color: #333333;
+    overflow-x: auto;
+  }
+
+  .hljs-comment,
+  .hljs-meta {
+    color: #969896;
+  }
+
+  .hljs-string,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-strong,
+  .hljs-emphasis,
+  .hljs-quote {
+    color: #df5000;
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-type {
+    color: #a71d5d;
+  }
+
+  .hljs-literal,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-attribute {
+    color: #0086b3;
+  }
+
+  .hljs-section,
+  .hljs-name {
+    color: #63a35c;
+  }
+
+  .hljs-tag {
+    color: #333333;
+  }
+
+  .hljs-title,
+  .hljs-attr,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo {
+    color: #795da3;
+  }
+
+  .hljs-addition {
+    color: #55a532;
+    background-color: #eaffea;
+  }
+
+  .hljs-deletion {
+    color: #bd2c00;
+    background-color: #ffecec;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}

src/components/CenteredContent/CenteredContent.js

@@ -16,7 +16,7 @@ const CenteredContent = (props) => {
 };
 
 CenteredContent.defaultProps = {
-  maxWidth: '600px',
+  maxWidth: '740px',
 };
 
 CenteredContent.propTypes = {

src/index.js

@@ -18,6 +18,7 @@ import reducers from 'reducers';
 import 'normalize.css/normalize.css';
 import 'utils/base-styles.scss';
 import 'fonts/atlas/atlas.css';
+import 'assets/styles/github-gist.scss';
 
 import Home from 'scenes/Home';
 import Editor from 'scenes/Editor';

src/utils/base-styles.scss

@@ -85,3 +85,11 @@ hr {
   border-bottom-style: solid;
   border-bottom-color: #ccc;
 }
+
+:global {
+  .hljs {
+    border: 1px solid rgba(0,0,0,.0625);
+    padding: 1rem;
+    border-radius: 0.25rem;
+  }
+}