I believe the way the AST is provided by lowlight makes this more difficult then it would seem but i'll try to take a look if i get some time this weekend. Agree that it would definitely be nice

Here's an idea piggy-backing off the LineNumber functionality. Work could be done in this library to make this easier and more dynamic with inline styles, obviously. This method wouldn't ever support line wrapping though, so hooking into the AST (if possible) would be the ideal solution.

http://www.webpackbin.com/VkOyz_MQG

<SyntaxHighlighter 
  language='javascript' 
  showLineNumbers
  customStyle={{position: 'relative'}}
  lineNumberStyle={{ position: 'absolute', left: '.5em', right: '.5em' }}  
  codeTagProps={{style: {position: 'relative'}}}
>
  {`
      function () { alert('wow!'); }
      function () { alert('wowwww!'); }
  `}
</SyntaxHighlighter>

<style>
  .react-syntax-highlighter-line-number {
    display: block;
    width: 100%;
  }
  .react-syntax-highlighter-line-number:nth-child(2n) {
    background: rgba(0,0,0,.1);
  }
</style>

@bmathews I like this idea, one potential thing we could do is making lineNumberStyle optionally a function where we could provide arguments such as the line number allowing it to return a differnt style for each number?

@ben174 just published version 4.01 implementing some of the stuff mentioned by @bmathews here you can see the pr here: #46 . Let me know if this helps solve your issue at all.

Quick example: http://www.webpackbin.com/E13xANNmM

going to close for similar reasons as #48 , we simply don't get enough information to do this.

@ben174 just published v 5.0.0 which enables this with a wrapLines prop, if using wrapLines can use a lineStyle prop as either object, or function that recives line number to style individual lines.

You can see an example here