Enhancement/code prettify (#46)

* beautify code block with google-code-prettify

* prettyPrint when componentDidMount
* css style for code block

* skip rule 'no-unresolved' for eslint

* conflict with webpack resolve path

* refactor all code block in example folder with component <Code />

* refactor scss folder structure

* specify the responsibility for each stylesheet with file name

* load local color themes, tomorrow, for google code prettify

* re-select demo color and save into variable

* unify the color system for storybook

packages/react-bootstrap-table2-example/examples/basic/borderless-table.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -29,6 +30,15 @@ const columns = [{
   text: 'Product Price'
 }];
 
+const sourceCode = `\
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  bordered={ false }
+/>
+`;
+
 export default () => (
   <div>
     <BootstrapTable
@@ -37,14 +47,6 @@ export default () => (
       columns={ columns }
       bordered={ false }
     />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  bordered={ false }
-/>
-    `}
-    </code></pre>
+    <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/basic/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -29,10 +30,8 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`const columns = [{
+const sourceCode = `\
+const columns = [{
   dataField: 'id',
   text: 'Product ID'
 }, {
@@ -44,7 +43,11 @@ export default () => (
 }];
 
 <BootstrapTable keyField='id' data={ products } columns={ columns } />
-    `}
-    </code></pre>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/basic/no-data-table.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const columns = [{
   dataField: 'id',
@@ -13,10 +14,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
-  <div>
-    <BootstrapTable keyField="id" data={ [] } columns={ columns } noDataIndication="Table is Empty" />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
+const sourceCode = `\
 <BootstrapTable keyField='id' data={ [] } columns={ columns } noDataIndication="Table is Empty" />
 
 // Following is more customizable example
@@ -26,7 +24,11 @@ function indication() {
 }
 
 <BootstrapTable keyField='id' data={ [] } columns={ columns } noDataIndication={ indication } />
-    `}
-    </code></pre>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ [] } columns={ columns } noDataIndication="Table is Empty" />
+    <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -29,6 +30,17 @@ const columns = [{
   text: 'Product Price'
 }];
 
+const sourceCode = `\
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  striped
+  hover
+  condensed
+/>
+`;
+
 export default () => (
   <div>
     <BootstrapTable
@@ -39,16 +51,6 @@ export default () => (
       hover
       condensed
     />
-    <pre className="prettyprint lang-html"><code className="language-html">{`
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  striped
-  hover
-  condensed
-/>
-    `}
-    </code></pre>
+    <Code>{ sourceCode }</Code>
   </div>
 );