Wrap line numbers in spans #28
Conversation
| @@ -43,11 +43,11 @@ function createElement({ node, style, useInlineStyles, key }) { | |||
| } | |||
|
|
|||
| function getLineNumberString(lines, startingLineNumber) { | |||
There was a problem hiding this comment.
maybe we should change this to just getLineNumbers now?
There was a problem hiding this comment.
Ah, missed this. Good catch.
| @@ -43,11 +43,11 @@ function createElement({ node, style, useInlineStyles, key }) { | |||
| } | |||
|
|
|||
| function getLineNumberString(lines, startingLineNumber) { | |||
| return lines.reduce((lineCountString, _, i) => lineCountString + `${i + startingLineNumber}\n`, ''); | |||
| return lines.map((_line, i) => { return <span className="line" key={"line-" + i}>{`${i + startingLineNumber}\n`}</span> }) | |||
There was a problem hiding this comment.
can we use single quotes on the className and a template string for key
key={`line-${i}`}There was a problem hiding this comment.
The first argument here can just be a _ as well
There was a problem hiding this comment.
And for the className can we use something more unique, maybe scope it to the library?
className='react-syntax-highlighter-line-number
| } | ||
|
|
||
| function LineNumbers({ codeString, style = {float: 'left', paddingRight: '10px'}, startingLineNumber }) { | ||
| return <code style={style}>{getLineNumberString(codeString.split('\n'), startingLineNumber)}</code> | ||
| return <code style={style}>{getLineNumberString(codeString.replace(/\n$/, '').split('\n'), startingLineNumber)}</code> |
There was a problem hiding this comment.
What is the replace for?
There was a problem hiding this comment.
So we don't get a line number for a trailing newline. See: 05df3b8
| function getLineNumberString(lines, startingLineNumber) { | ||
| return lines.reduce((lineCountString, _, i) => lineCountString + `${i + startingLineNumber}\n`, ''); | ||
| function getLineNumbers(lines, startingLineNumber) { | ||
| return lines.map((_, i) => { return <span className="react-syntax-highlighter-line-number" key={`line-${i}`}>{`${i + startingLineNumber}\n`}</span> }) |
There was a problem hiding this comment.
we can use implicit return here instead of { and explcit return statement
|
@twe4ked that last comment + update the tests and it looks good! thanks! |
I also added a commit to exclude a trailing blank newline from the line numbers.