added Prism React Renderer for syntax highlighting

[paean99]

Added https://github.com/FormidableLabs/prism-react-renderer#prism.
The code already has the line numbers and it is easy to add the event listener, the react way.

Also added the types for the package, taken from a recent PR that wasn't accepted yet.
FormidableLabs/prism-react-renderer#23

It needs some theme attention. The themes from Prism React Renderer are different from the original Prism. So i disabled them (there is still a comment showing how to add them) and used the Prism-coy
theme as you decided before. But unfortunately the html structure is a little different and it isn't applying correctly. Also, i think that many of the styles from the original Prism must be done through javascript on the client, which complicate things if one want them to be exactly the same.

To see the differences, here is some examples:
From Prism:

<pre data-src="prism.js" class=" language-javascript" data-src-loaded="">
    <code class=" language-javascript">
        <span class="token keyword">var</span>
        <span class="token operator">=</span> 
        <span class="token punctuation">(</span>
    </code>
</pre>

From Prism React Renderer:

<pre data-src="prism.js" class=" language-javascript" data-src-loaded="">
    <code class=" language-javascript">        
        <div class="token-line">
            <span class="CodeFile__LineNo-sc-1desyr9-1 eaHJCX">1</span><!-- the line numbers -->
            <span class="token punctuation">{</span>
            <span class="token plain"></span>
        </div>
        <div class="token-line">
            <span class="CodeFile__LineNo-sc-1desyr9-1 eaHJCX">2</span> <!-- the line numbers -->
            <span class="token punctuation">{</span>
            <span class="token plain"></span>
        </div>
    </code>
</pre>

For this and for simplicity sake and also to follow your lead and some of the Prism React author, i tried to use Styled Components to do some corrections, but i think i made some mistake. The styles don't seem to be passed correctly. I left them all the same.
I was a small typo :(
All working now.

When i added this commit i forgot to redo the line highlight from the inputs. Just added commit "Added highlight using Styled Components" to correct it.

It should be improved further, since the client browser must be refreshed to see the results.

One more TODO: i forgot to change the highlight color to one more kind to the eyes. I used this one at random just to contrast when developing.

[benawad]

Cool, I'm ok changing the theme if that's easier. I'll take a look at the code in a couple days

[paean99]

I added a working version of a mouse selection for the lines numbers.

They update the input form also.
The update in the other direction: from the input form to the code highlight, is still missing, but i thought i would be better to share what is already done. If i get some time i will get back at it if you haven't done it first.

It works but it will need some refactoring. I don't really know react or its niche and i am leaning as i follow you and others. I hope its isn't too anti pattern but the knowledge and the time is small.

Fortunately this has been a good opportunity to learn a bit more :)

[paean99]

Just saw this https://reactjs.org/docs/hooks-rules.html
One of the rules is that one shouldn't call the hooks inside a condition.

I am not exactly sure of the boundaries of that rule, but the explanation that they give brought me to optimize a little some of the code in this PR and bring to your attention the #99 issue.

[paean99]

For simplicity in creating the handleSelectLine, i let the lineSelectionState initial state as an empty array, but now it should be changed to [0, 0] and change the handleSelectLine algorithm accordingly. I will do it, if i find a little time between work.

[benawad]

Tested out the code and had to make a few changes to get it to work. I pushed a commit and needed to open a new pull request to include it. closing this in favor of #105