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

.eslintrc

@@ -17,7 +17,7 @@
     "react/jsx-space-before-closing": 0,
     "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }],
     "import/extensions": 0, // skip import extensions
-    "import/no-unresolved": [1, { "ignore": ["^react-bootstrap-table"] }], // monorepo setup
+    "import/no-unresolved": [0, { "ignore": ["^react-bootstrap-table"] }], // monorepo setup
     "import/prefer-default-export": 0,
     "import/no-extraneous-dependencies": 0
   },

packages/react-bootstrap-table2-example/.storybook/preview-head.html

@@ -1,2 +1,2 @@
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
- <link rel="stylesheet" type="text/css" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow.min.css"></link> 
+ 

packages/react-bootstrap-table2-example/.storybook/webpack.config.js

@@ -6,6 +6,7 @@ const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const aliasPath = {
   examples: examplesPath,
+  common: path.join(examplesPath, 'common'),
   stories: storyPath,
 };
 

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">{`
+    <Code>{ sourceCode }</Code>
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  bordered={ false }
-/>
-    `}
-    </code></pre>
   </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 () => (
+const sourceCode = `\
-  <div>
+const columns = [{
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`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 () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable keyField="id" data={ [] } columns={ columns } noDataIndication="Table is Empty" />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 <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">{`
+    <Code>{ sourceCode }</Code>
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  striped
-  hover
-  condensed
-/>
-    `}
-    </code></pre>
   </div>
 );

packages/react-bootstrap-table2-example/examples/columns/column-align-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -35,10 +36,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -56,7 +54,11 @@ const columns = [{
 }];
 
 <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/columns/column-class-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -35,10 +36,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -56,7 +54,11 @@ const columns = [{
 }];
 
 <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/columns/column-event-table.js

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -34,11 +35,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <h3>Try to Click on Product ID columns</h3>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -54,7 +51,12 @@ const columns = [{
 }];
 
 <BootstrapTable keyField='id' data={ products } columns={ columns } />
-    `}
+`;
-    </code></pre>
+
+export default () => (
+  <div>
+    <h3>Try to Click on Product ID columns</h3>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/columns/column-format-table.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -43,14 +44,7 @@ const columns = [{
   formatter: priceFormatter
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-    />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 function priceFormatter(cell, row) {
   if (row.onSale) {
     return (
@@ -78,7 +72,15 @@ const columns = [
   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/columns/column-format-with-extra-data-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -41,15 +42,7 @@ const columns = [{
   }
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      bordered={ false }
-    />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 function rankFormatter(cell, row, rowIndex, formatExtraData) {
   return (
     <i className={ formatExtraData[cell] } />
@@ -72,7 +65,16 @@ const columns = [
   data={ products }
   columns={ columns }
 />
-    `}
+`;
-    </code></pre>
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      bordered={ false }
+    />
+    <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -31,10 +32,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -44,7 +42,11 @@ const columns = [{
 ];
 
 <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/columns/column-style-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -32,11 +33,11 @@ const columns = [{
   style: (cell, row, colIndex) => {
     if (row.id % 2 === 0) {
       return {
-        backgroundColor: '#bbe'
+        backgroundColor: '#81c784'
       };
     }
     return {
-      backgroundColor: '#fea'
+      backgroundColor: '#c8e6c9'
     };
   }
 }, {
@@ -44,10 +45,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -61,11 +59,11 @@ const columns = [{
   style: (cell, row, colIndex) => {
     if (row.id % 2 === 0) {
       return {
-        backgroundColor: '#bbe'
+        backgroundColor: '#81c784'
       };
     }
     return {
-      backgroundColor: '#fea'
+      backgroundColor: '#c8e6c9'
     };
   }
 }, {
@@ -74,7 +72,11 @@ const columns = [{
 }];
 
 <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/columns/column-title-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -32,10 +33,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -50,7 +48,11 @@ const columns = [{
 }];
 
 <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/columns/nested-data-table.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -39,10 +40,8 @@ const columns = [{
   text: 'PostCode'
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
+const columns = [{
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`const columns = [{
   dataField: 'id',
   text: 'User ID'
 }, {
@@ -60,7 +59,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/common/codeBlock.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class extends Component {
+  static propTypes = {
+    children: PropTypes.string
+  }
+  static defaultProps = {
+    children: ''
+  }
+  componentDidMount() {
+    // code-prettify
+    // run the PR.prettyPrint() function once your page has finished loading
+    if (typeof (PR) !== 'undefined') PR.prettyPrint(); // eslint-disable-line no-undef
+  }
+
+  render() {
+    return (
+      <div className="highlight-text-html-basic">
+        <pre className="prettyprint lang-js">
+          { this.props.children }
+        </pre>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -32,10 +33,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -50,7 +48,11 @@ const columns = [{
 }];
 
 <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/header-columns/column-class-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -35,10 +36,7 @@ const columns = [{
   }
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -56,7 +54,11 @@ const columns = [{
 }];
 
 <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/header-columns/column-event-table.js

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -34,11 +35,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <h3>Try to Click on Product ID header column</h3>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -54,7 +51,12 @@ const columns = [{
 }];
 
 <BootstrapTable keyField='id' data={ products } columns={ columns } />
-    `}
+`;
-    </code></pre>
+
+export default () => (
+  <div>
+    <h3>Try to Click on Product ID header column</h3>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -38,14 +39,7 @@ const columns = [{
   headerFormatter: priceFormatter
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-    />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 function priceFormatter(column, colIndex) {
   return (
     <h5><strong>$$ { column.text } $$</strong></h5>
@@ -65,7 +59,15 @@ const columns = [
   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/header-columns/column-style-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -26,7 +27,7 @@ const columns = [{
   dataField: 'name',
   text: 'Product Name',
   headerStyle: {
-    backgroundColor: '#fea'
+    backgroundColor: '#c8e6c9'
   }
 }, {
   dataField: 'price',
@@ -34,19 +35,16 @@ const columns = [{
   headerStyle: (column, colIndex) => {
     if (colIndex % 2 === 0) {
       return {
-        backgroundColor: '#bbe'
+        backgroundColor: '#81c784'
       };
     }
     return {
-      backgroundColor: '#fea'
+      backgroundColor: '#c8e6c9'
     };
   }
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -54,7 +52,7 @@ const columns = [{
   dataField: 'name',
   text: 'Product Name',
   headerStyle: {
-    backgroundColor: '#fea'
+    backgroundColor: '#c8e6c9'
   }
 }, {
   dataField: 'price',
@@ -62,17 +60,21 @@ const columns = [{
   headerStyle: (column, colIndex) => {
     if (colIndex % 2 === 0) {
       return {
-        backgroundColor: '#bbe'
+        backgroundColor: '#81c784'
       };
     }
     return {
-      backgroundColor: '#fea'
+      backgroundColor: '#c8e6c9'
     };
   }
 }];
 
 <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/header-columns/column-title-table.js

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
+import Code from 'common/codeBlock';
 
 const products = [];
 
@@ -32,10 +33,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
+const sourceCode = `\
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <pre className="prettyprint lang-js"><code className="language-javascript">{`
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -50,7 +48,11 @@ const columns = [{
 }];
 
 <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/stories/index.js

@@ -31,6 +31,7 @@ import HeaderColumnStyleTable from 'examples/header-columns/column-style-table';
 
 // css style
 import 'bootstrap/dist/css/bootstrap.min.css';
+import 'stories/stylesheet/tomorrow.min.css';
 import 'stories/stylesheet/storybook.scss';
 import 'react-bootstrap-table2/style/react-bootstrap-table.scss';
 

packages/react-bootstrap-table2-example/stories/stylesheet/base/_base.scss

@@ -8,3 +8,6 @@ body {
 $grey-500: #9E9E9E;
 $grey-900: #212121;
 $pink-500: #E91E63;
+$green-lighten-2: #81c784;
+$green-lighten-4: #c8e6c9;
+$markdown-color: #f6f8fa;

packages/react-bootstrap-table2-example/stories/stylesheet/base/_code-block.scss

@@ -0,0 +1,10 @@
+.highlight-text-html-basic {
+  margin-bottom: 16px;
+
+  pre {
+    background-color: $markdown-color;
+    padding: 16px;
+    border-radius: 3px;
+  }
+}
+

packages/react-bootstrap-table2-example/stories/stylesheet/base/_github-corner.scss

@@ -25,24 +25,3 @@
     animation: octocat-wave 560ms ease-in-out
   }
 }
-
-/* Adding cursor blinking animation */
-.typed-cursor{
-  font-size: 30px;
-  color: $grey-500;
-  opacity: 1;
-  animation: typedjsBlink 0.7s infinite;
-}
-@keyframes typedjsBlink{
-  50% { opacity: 0.0; }
-}
-@-webkit-keyframes typedjsBlink{
-  0% { opacity: 1; }
-  50% { opacity: 0.0; }
-  100% { opacity: 1; }
-}
-.typed-fade-out{
-  opacity: 0;
-  transition: opacity .25s;
-  animation: 0;
-}

packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss

@@ -4,9 +4,9 @@
 }
 
 .demo-row-even {
-  background-color: #bbe
+  background-color: $green-lighten-2;
 }
 
 .demo-row-odd {
-  background-color: #fea
+  background-color: $green-lighten-4;
 }

packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss

@@ -1,6 +1,7 @@
 /* customized style for storybook*/
 @import "base/base";
-@import "base/misc";
+@import "base/github-corner";
+@import "base/code-block";
 
 @import "welcome/index";
 @import "columns/index";

packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss

@@ -15,3 +15,24 @@
 span.love-icon {
   color: $pink-500;
 }
+
+/* Adding cursor blinking animation */
+.typed-cursor{
+  font-size: 30px;
+  color: $grey-500;
+  opacity: 1;
+  animation: typedjsBlink 0.7s infinite;
+}
+@keyframes typedjsBlink{
+  50% { opacity: 0.0; }
+}
+@-webkit-keyframes typedjsBlink{
+  0% { opacity: 1; }
+  50% { opacity: 0.0; }
+  100% { opacity: 1; }
+}
+.typed-fade-out{
+  opacity: 0;
+  transition: opacity .25s;
+  animation: 0;
+}