[feat!] Get lineProps, lineNumberProps, and lineNumberContainerProps back

README.md

@@ -38,10 +38,9 @@ I do realize that javascript styles are not for everyone, so you can optionally
 - `showLineNumbers` - if this is enabled line numbers will be shown next to the code block.
 - `showInlineLineNumbers` - if this is enabled in conjunction with `showLineNumbers`, line numbers will be rendered into each line, which allows line numbers to display properly when using renderers such as <a href="https://github.com/conorhastings/react-syntax-highlighter-virtualized-renderer">react-syntax-highlighter-virtualized-renderer</a>. (This prop will have no effect if `showLineNumbers` is `false`.)
 - `startingLineNumber` - if `showLineNumbers` is enabled the line numbering will start from here.
-- `lineNumberContainerStyle` - the line numbers container default to appearing to the left with 10px of right padding. You can use this to override those styles.
-- `lineNumberStyle` - inline style to be passed to the span wrapping each number. Can be either an object or a function that receives current line number as argument and returns style object.
-- `wrapLines` - a boolean value that determines whether or not each line of code should be wrapped in a parent element. defaults to false, when false one can not take action on an element on the line level. You can see an example of what this enables <a href="https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/diff.html">here</a>
-- `wrapLongLines` - boolean to specify whether to style the `<code>` block with `white-space: pre-wrap` or `white-space: pre`. [Demo](https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/)
+- `lineNumberContainerProps` - props to be passed to `<code>` tag wrapping line numbers. Default style is to float left with 10px of right padding.
+- `lineNumberProps` - props to be passed to the `<span>` wrapping each number. Can be either an object or a function that receives current line number as argument and returns props object. This can be used e.g. for custom click events like shown <a href="https://conorhastings.github.io/react-syntax-highlighter/demo/index.html">here</a> (turn show line numbers on).
+- `wrapLines` - a boolean value that determines whether or not each line of code should be wrapped in a parent element. defaults to false, when false one can not take action on an element on the line level. You can see an example of what this enables <a href="https://conorhastings.github.io/react-syntax-highlighter/demo/diff.html">here</a>
 - `lineProps` - props to be passed to the span wrapping each line if wrapLines is true. Can be either an object or a function that receives current line number as argument and returns props object.
 - `renderer` - an optional custom renderer for rendering lines of code. See <a href="https://github.com/react-syntax-highlighter/react-syntax-highlighter-virtualized-renderer">here</a> for an example.
 - `PreTag` - the element or custom react component to use in place of the default pre tag, the outermost tag of the component (useful for custom renderer not targeting DOM).

__tests__/__snapshots__/code-style-passed-to-line-numbers.js.snap

@@ -20,6 +20,7 @@ exports[`SyntaxHighlighter component passes along code style to non-inline line
       }
     }
   >
+<<<<<<< HEAD
     <code
       style={
         Object {
@@ -28,19 +29,31 @@ exports[`SyntaxHighlighter component passes along code style to non-inline line
           "paddingRight": "10px",
         }
       }
+=======
+    <span
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       <span
         className="react-syntax-highlighter-line-number"
         style={Object {}}
       >
         1
 
+<<<<<<< HEAD
       </span>
       <span
         className="react-syntax-highlighter-line-number"
         style={Object {}}
       >
         2
+=======
+    </span>
+    <span
+      className="react-syntax-highlighter-line-number"
+    >
+      2
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
 
       </span>
       <span
@@ -101,53 +114,85 @@ exports[`SyntaxHighlighter component passes along code style to non-inline line
       </span>
     </code>
     <span
+<<<<<<< HEAD
       style={
         Object {
           "fontWeight": "bold",
         }
       }
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       const
     </span>
     <span
+<<<<<<< HEAD
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
        woah = 
     </span>
     <span
+<<<<<<< HEAD
       className="hljs-function hljs-params"
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       fun
     </span>
     <span
+<<<<<<< HEAD
       className="hljs-function"
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
        =&gt;
     </span>
     <span
+<<<<<<< HEAD
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
        fun + 
     </span>
     <span
+<<<<<<< HEAD
       style={
         Object {
           "color": "#880000",
         }
       }
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       1
     </span>
     <span
+<<<<<<< HEAD
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       ;
 
     </span>
     <span
+<<<<<<< HEAD
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
 
     </span>

__tests__/__snapshots__/line-numbers.js.snap

@@ -3304,66 +3304,106 @@ exports[`SyntaxHighlighter component renders line numbers if showLineNumbers ===
       1
     </span>
     <span
+<<<<<<< HEAD
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       ,
     </span>
     <span
+<<<<<<< HEAD
       style={
         Object {
           "color": "#880000",
         }
       }
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       2
     </span>
     <span
+<<<<<<< HEAD
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       ,
     </span>
     <span
+<<<<<<< HEAD
       style={
         Object {
           "color": "#880000",
         }
       }
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       3
     </span>
     <span
+<<<<<<< HEAD
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       ].map(
     </span>
     <span
+<<<<<<< HEAD
       className="hljs-function hljs-params"
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       n
     </span>
     <span
+<<<<<<< HEAD
       className="hljs-function"
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
        =&gt;
     </span>
     <span
+<<<<<<< HEAD
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
        n + 
     </span>
     <span
+<<<<<<< HEAD
       style={
         Object {
           "color": "#880000",
         }
       }
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       1
     </span>
     <span
+<<<<<<< HEAD
       style={Object {}}
+=======
+      className="react-syntax-highlighter-line-number"
+>>>>>>> 7db1efcc... Add lineNumberProps and lineNumberContainerProps
     >
       ).filter(n !== 
     </span>

__tests__/line-numbers.js

@@ -54,13 +54,13 @@ test('SyntaxHighlighter component renders correctly', () => {
   expect(tree).toMatchSnapshot();
 });
 
-test('SyntaxHighlighter allows lineNumberStyle as object', () => {
+test('SyntaxHighlighter allows lineNumberProps as object', () => {
   const tree = renderer
     .create(
       <SyntaxHighlighter
         language="javascript"
-        showLineNumbers
-        lineNumberStyle={{ color: 'red' }}
+        showLineNumbers={true}
+        lineNumberProps={{ style: { color: 'red' } }}
       >
         {code}
       </SyntaxHighlighter>
@@ -69,13 +69,13 @@ test('SyntaxHighlighter allows lineNumberStyle as object', () => {
   expect(tree).toMatchSnapshot();
 });
 
-test('SyntaxHighlighter allows lineNumberStyle as function', () => {
+test('SyntaxHighlighter allows lineNumberProps as function', () => {
   const tree = renderer
     .create(
       <SyntaxHighlighter
         language="javascript"
         showLineNumbers
-        lineNumberStyle={() => ({ color: 'red' })}
+        lineNumberProps={() => ({ style: { color: 'red' } })}
       >
         {code}
       </SyntaxHighlighter>
@@ -84,14 +84,14 @@ test('SyntaxHighlighter allows lineNumberStyle as function', () => {
   expect(tree).toMatchSnapshot();
 });
 
-test('SyntaxHighlighter allows lineNumberStyle as function for inline line numbers', () => {
+test('SyntaxHighlighter allows lineNumberProps as function for inline line numbers', () => {
   const tree = renderer
     .create(
       <SyntaxHighlighter
         language="javascript"
         showLineNumbers
         showInlineLineNumbers
-        lineNumberStyle={() => ({ color: 'red' })}
+        lineNumberProps={() => ({ style: { color: 'red' } })}
       >
         {code}
       </SyntaxHighlighter>