Allow overriding container styles by karlhorky · Pull Request #52 · pomber/code-surfer · GitHub
Skip to content

Allow overriding container styles#52

Open
karlhorky wants to merge 2 commits intopomber:masterfrom
karlhorky:patch-1
Open

Allow overriding container styles#52
karlhorky wants to merge 2 commits intopomber:masterfrom
karlhorky:patch-1

Conversation

@karlhorky
Copy link
Copy Markdown

@karlhorky karlhorky commented Mar 3, 2019 •
edited
Loading

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:

screen shot 2019-03-04 at 00 08 23

After:

screen shot 2019-03-04 at 00 51 33

@pomber
Copy link
Copy Markdown
Owner

pomber commented Mar 5, 2019

@karlhorky
Copy link
Copy Markdown
Author

karlhorky commented Mar 6, 2019

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
Copy link
Copy Markdown
Author

karlhorky commented May 10, 2019

@pomber pomber mentioned this pull request May 13, 2019
Merged
19 tasks
@karlhorky karlhorky mentioned this pull request May 20, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@karlhorky @pomber