Search code examples
javascriptreactjssyntax-highlighting

Highlight line in react-syntax-highlighter

Is there a way to highlight a code line inside a react-syntax-highlighter component? You can see the highlight I mean in the image below on line 43.

enter image description here

Solution

  • You can hack on the generated spans. Firstly, without talking about React, let us use plain jQuery to solve the problem:

    Open the demo, then run

    $(".language-javascript>span:nth-child(3)").css('background-color', 'blue')

    and you will see the 3rd line being blue!

    enter image description here

    Secondly, let us make it work in React. You can use some libraries to inject css codes like .language-javascript>span:nth-child(3) {background-color: blue;} (where 3 is the line number you want to highlight) into React component tree.