Allow overriding container styles

[karlhorky]

MVP for #44 (comment)

<div
  style={{
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
  }}
>
  <div style={{ flex: 1, overflow: 'hidden' }} key="codeTop">
    <CodeSurfer
      code={require('!raw-loader!./example-1.html')}
      lang="markup"
      containerStyles={{ height: '100%', width: '100%', padding: '10px' }}
    />
  </div>
  <div style={{ height: '2px', backgroundColor: '#333' }} />
  <div style={{ flex: 1, overflow: 'hidden' }} key="codeBottom">
    <CodeSurfer
      code={require('!raw-loader!./example-1.css')}
      lang="css"
      containerStyles={{ height: '100%', width: '100%', padding: '10px' }}
    />
  </div>
</div>

Before:

After:

[pomber]

Hey @karlhorky , thanks for the PR!
I think there are going to be other problems if you put two deck-code-surfer components in the same slide. We need a different component for that use case.
If you want to try to rewrite deck-code-surfer-split I'd be happy to merge it.

[karlhorky]

Two deck-code-surfer components actually works surprisingly well, have this in a couple of decks so far since I developed this solution. I even have a deck that uses steps in both HTML and CSS at the same time to teach how selectors work, and this also works well.

What are your concerns? The only problem I've had so far is the sizing / zooming.

[karlhorky]

If there's something that I haven't thought about, then I'm all for considering other options (like rewriting the deck-code-surfer-split component with your guidance).

The decks I have are working pretty well though.

Aside from that, I could imagine that other use cases would also be served well from overriding the container styles. Do you have something against allowing this?