Use highlight.js from npm and trim strings code blocks

Author: ramasilveyra

packages/website/package.json

@@ -20,6 +20,7 @@
     "babel-polyfill": "^6.16.0",
     "codemirror": "^5.19.0",
     "component-playground": "^1.3.1",
+    "highlight.js": "^9.7.0",
     "react": "^15.3.2",
     "react-copy-to-clipboard": "^4.2.3",
     "react-docgen": "^2.11.0",

packages/website/src/components/Playground/index.js

@@ -1,18 +1,20 @@
-/* global hljs */
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import hljs from 'highlight.js'
 import './index.styl';
 
-class Playground extends React.Component {
+class Playground extends Component {
   componentDidMount() {
     hljs.configure({ classPrefix: '' });
     hljs.highlightBlock(this.codeBlock);
   }
+
   componentDidUpdate() {
     hljs.configure({ classPrefix: '' });
     hljs.initHighlighting.called = false;
     hljs.highlightBlock(this.codeBlock);
   }
+
   render() {
     const { component, code, title } = this.props;
     return (
@@ -25,12 +27,12 @@ class Playground extends React.Component {
           {component}
         </div>
         <div className="react-playground-code">
-          <CopyToClipboard text={code}>
+          <CopyToClipboard text={code.trim()}>
             <button className="copy-code-btn btn btn-sm btn-success">Copy code</button>
           </CopyToClipboard>
           <pre>
-            <code className="javascript" ref={node => this.codeBlock = node}>
-              {code}
+            <code className="javascript" ref={node => { this.codeBlock = node; }}>
+              {code.trim()}
             </code>
           </pre>
         </div>

packages/website/src/views/index.pug

@@ -4,6 +4,5 @@ html
     title= htmlWebpackPlugin.options.title
     meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
     link(href="https://cdn.auth0.com/styleguide/4.7.7/index.min.css", rel="stylesheet")
-    script(src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js")
   body
     #app