Each line wrapped in a div?

[ben174]

Would it make sense to wrap each line in a div? My use case is that I'll be using this to highlight code coverage, so I'd like to have some lines with a different background color than other lines. I think this could also be useful for allowing people to highlight line ranges or click on the line number gutter to link to lines of code, like how GitHub does in source view.

[conorhastings]

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

[bmathews]

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>

[conorhastings]

@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?

[conorhastings]

@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.

[bmathews]

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

[conorhastings]

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

[conorhastings]

@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