Enabling Line Wrap with React-Syntax-Highlighter

Highlight line in react-syntax-highlighter

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!

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.

Automatic line break in js SyntaxHighlighter

I don't actually use SyntaxHighlight, but it seems to be possible to attach an white-space: pre-wrap CSS style to the <pre> or <script> tag that SyntaxHighlight uses.

HTML (using <pre>):

<pre class="brush: js" class="syntaxhighlight">
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
</pre>

HTML (using <script>):

<script type="syntaxhighlighter" class="syntaxhighlight brush: js"><![CDATA[
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
]]></script>

CSS:

.syntaxhighlight {
    white-space: pre-wrap;
}

How can I insert a line break into a Text component in React Native?

This should do it:

<Text>
Hi~{"\n"}
this is a test message.
</Text>

---

Related Topics