added option for line numbers in prismjs codeblocks (#66)

* added option for line numbers in prismjs codeblocks

* moved PrismJS line number conditional out of inline markup

* added lineNumbers propType to Code.js and removed inline boolean value from JsonLinkInlineExamples.js to remove lint warnings

example/src/app.scss

@@ -552,3 +552,45 @@ code[class*="language-"], pre[class*="language-"] {
   margin-bottom: 1rem;
   display: inline-block;
 }
+
+pre.line-numbers {
+  position: relative;
+  padding-left: 3.8em;
+  counter-reset: linenumber;
+  > code {
+    position: relative;
+    white-space: inherit;
+    overflow-y: visible;
+  }
+}
+
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em;
+  margin-top: 0;
+  /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.line-numbers-rows > span {
+  pointer-events: none;
+  display: block;
+  counter-increment: linenumber;
+  margin-top: 0;
+  &:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+  }
+}

example/src/components/JsonLinkInlineExamples.js

@@ -59,7 +59,7 @@ export default class JsonLinkInlineExamples extends React.Component {
             onShow={this.onShow}
             description={<p>This is a description for the JsonLinkInline component.</p>}
           />
-          <Code type="jsx">
+          <Code type="jsx" lineNumbers>
 {`<JsonLinkInline
   json={{ some json object or string }}
   showJson={ boolean to toggle json display }

src/components/Code.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { PrismCode } from 'react-prism';
 import Prism from 'prismjs';
+import 'prismjs/plugins/line-numbers/prism-line-numbers';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-json';
 
@@ -21,10 +22,11 @@ export default class CodeBlock extends React.Component {
 
   render() {
     const lang = this.props.language;
+    const lineNum = this.props.lineNumbers ? 'line-numbers' : '';
 
     return (
       <div className="code-block--code">
-        <pre className="base--pre">
+        <pre className={`base--pre ${lineNum}`}>
           <PrismCode className={`prism language-${lang}`}>
             {this.props.children}
           </PrismCode>
@@ -37,8 +39,10 @@ export default class CodeBlock extends React.Component {
 CodeBlock.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.element]).isRequired,
   language: PropTypes.oneOf(languages),
+  lineNumbers: PropTypes.bool,
 };
 
 CodeBlock.defaultProps = {
   language: 'js',
+  lineNumbers: false,
 };