Add syntax highlighting

.storybook/head.html

@@ -0,0 +1,2 @@
+<script src="https://cdn.jsdelivr.net/prism/1.5.0/prism.js" ></script>
+<script src="https://cdn.jsdelivr.net/prism/1.5.0/components/prism-jsx.min.js" ></script>

package.json

@@ -60,10 +60,13 @@
     "json-loader": "0.5.4",
     "jsx-to-string": "0.2.11",
     "less-vars-to-js": "1.1.1",
+    "lodash.debounce": "4.0.6",
     "react": "15.0.2",
+    "react-addons-pure-render-mixin": "15.0.2",
     "react-baseline": "0.2.1",
     "react-copy-to-clipboard": "4.1.0",
     "react-dom": "15.0.2",
+    "react-prism": "3.2.0",
     "webpack": "1.13.0",
     "webpack-dev-middleware": "1.6.1",
     "webpack-hot-middleware": "2.10.0"

wip_modules/AddCode/AddCode.js

@@ -1,7 +1,9 @@
 import styles from './AddCode.less';
 
 import React, { Children, Component, PropTypes } from 'react';
+import debounce from 'lodash.debounce';
 import jsxToString from 'jsx-to-string';
+import { PrismCode } from 'react-prism'
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 // Hack. Please show me a better way :)
@@ -25,6 +27,10 @@ export default class AddCode extends Component {
       copiedToClipboard: false
     };
 
+    this.debouncedResetCopiedToClipboard =
+      debounce(this.resetCopiedToClipboard, 5000);
+
+    this.resetCopiedToClipboard = this.resetCopiedToClipboard.bind(this);
     this.toggleCodeVisibility = this.toggleCodeVisibility.bind(this);
     this.copiedToClipboard = this.copiedToClipboard.bind(this);
   }
@@ -37,16 +43,16 @@ export default class AddCode extends Component {
     });
   }
 
+  resetCopiedToClipboard() {
+    this.setState({
+      copiedToClipboard: false
+    });
+  }
+
   copiedToClipboard() {
     this.setState({
       copiedToClipboard: true
-    }, () => {
-      setTimeout(() => {
-        this.setState({
-          copiedToClipboard: false
-        });
-      }, 5000);
-    });
+    }, this.debouncedResetCopiedToClipboard);
   }
 
   render() {
@@ -61,20 +67,23 @@ export default class AddCode extends Component {
           <button className={styles.showHideButton} onClick={this.toggleCodeVisibility}>
             {isCodeVisible ? 'Hide code' : 'Show code'}
           </button>
-          {
-            isCodeVisible &&
-              <CopyToClipboard text={code} onCopy={this.copiedToClipboard}>
-                <button className={styles.copyToClipboardButton} disabled={copiedToClipboard}>
-                  {copiedToClipboard ? 'Copied!' : 'Copy to clipboard'}
-                </button>
-              </CopyToClipboard>
-          }
         </div>
         {
           isCodeVisible &&
-            <pre className={styles.code}>
-              {code}
-            </pre>
+            <CopyToClipboard text={code} onCopy={this.copiedToClipboard}>
+              <div className={styles.code} onMouseLeave={this.resetCopiedToClipboard}>
+                <pre>
+                  <PrismCode className="language-jsx">
+                    <code>
+                      {code}
+                    </code>
+                  </PrismCode>
+                </pre>
+                <span className={styles.message}>
+                  {copiedToClipboard ? 'Copied!' : 'Click to copy'}
+                </span>
+              </div>
+            </CopyToClipboard>
         }
       </div>
     );

wip_modules/AddCode/AddCode.less

@@ -14,11 +14,222 @@
   width: 80px;
 }
 
-.copyToClipboardButton {
-  width: 110px;
+.message {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: .3em .5em;
+  font-size: .7em;
+  cursor: pointer;
+  opacity: 0;
+
+  .code:hover & {
+    opacity: 1;
+  }
 }
 
 .code {
-  font-family: monospace;
+  position: relative;
   font-size: 1.6em;
+
+  :global {
+    /*
+       prism styles below are modified version of:
+
+         https://cdn.jsdelivr.net/prism/1.5.0/themes/prism-coy.css
+    */
+
+    code[class*="language-"],
+    pre[class*="language-"] {
+      color: black;
+      background: none;
+      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+      text-align: left;
+      white-space: pre;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+      line-height: 1.5;
+      tab-size: 4;
+      hyphens: none;
+      cursor: pointer;
+    }
+
+    /* Code blocks */
+    pre[class*="language-"] {
+      position: relative;
+      border-left: 3px solid @sk-blue;
+      background-color: #fdfdfd;
+      overflow: visible;
+      padding: .5em 2em .5em 0;
+    }
+
+    code[class*="language"] {
+      max-height: inherit;
+      height: 100%;
+      padding: 0 1em;
+      display: block;
+      overflow: auto;
+    }
+
+    /* Margin bottom to accomodate shadow */
+    :not(pre) > code[class*="language-"],
+    pre[class*="language-"] {
+      background-color: #fdfdfd;
+      box-sizing: border-box;
+    }
+
+    /* Inline code */
+    :not(pre) > code[class*="language-"] {
+      position: relative;
+      padding: .2em;
+      border-radius: 0.3em;
+      color: #c92c2c;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      display: inline;
+      white-space: normal;
+    }
+
+    pre[class*="language-"]:before,
+    pre[class*="language-"]:after {
+      content: '';
+      z-index: -2;
+      display: block;
+      position: absolute;
+      bottom: 0.75em;
+      left: 0.18em;
+      width: 40%;
+      height: 20%;
+      max-height: 13em;
+      transform: rotate(-2deg);
+    }
+
+    :not(pre) > code[class*="language-"]:after,
+    pre[class*="language-"]:after {
+      right: 0.75em;
+      left: auto;
+      transform: rotate(2deg);
+    }
+
+    .token.comment,
+    .token.block-comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+      color: #7D8B99;
+    }
+
+    .token.punctuation {
+      color: #5F6364;
+    }
+
+    .token.property,
+    .token.tag,
+    .token.boolean,
+    .token.number,
+    .token.function-name,
+    .token.constant,
+    .token.symbol,
+    .token.deleted {
+      color: #c92c2c;
+    }
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.function,
+    .token.builtin,
+    .token.inserted {
+      color: #2f9c0a;
+    }
+
+    .token.operator,
+    .token.entity,
+    .token.url,
+    .token.variable {
+      color: #a67f59;
+      background: rgba(255, 255, 255, 0.5);
+    }
+
+    .token.atrule,
+    .token.attr-value,
+    .token.keyword,
+    .token.class-name {
+      color: #1990b8;
+    }
+
+    .token.regex,
+    .token.important {
+      color: #e90;
+    }
+
+    .language-css .token.string,
+    .style .token.string {
+      color: #a67f59;
+      background: rgba(255, 255, 255, 0.5);
+    }
+
+    .token.important {
+      font-weight: normal;
+    }
+
+    .token.bold {
+      font-weight: bold;
+    }
+    .token.italic {
+      font-style: italic;
+    }
+
+    .token.entity {
+      cursor: help;
+    }
+
+    .namespace {
+      opacity: .7;
+    }
+
+    @media screen and (max-width: 767px) {
+      pre[class*="language-"]:before,
+      pre[class*="language-"]:after {
+        bottom: 14px;
+        box-shadow: none;
+      }
+
+    }
+
+    /* Plugin styles */
+    .token.tab:not(:empty):before,
+    .token.cr:before,
+    .token.lf:before {
+      color: #e0d7d1;
+    }
+
+    /* Plugin styles: Line Numbers */
+    pre[class*="language-"].line-numbers {
+      padding-left: 0;
+    }
+
+    pre[class*="language-"].line-numbers code {
+      padding-left: 3.8em;
+    }
+
+    pre[class*="language-"].line-numbers .line-numbers-rows {
+      left: 0;
+    }
+
+    /* Plugin styles: Line Highlight */
+    pre[class*="language-"][data-line] {
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-left: 0;
+    }
+    pre[data-line] code {
+      position: relative;
+      padding-left: 4em;
+    }
+    pre .line-highlight {
+      margin-top: 0;
+    }
+  }
 }