Alignment issue when combining CopyBlock and showLineNumbers

Version: react-code-blocks@0.0.7 React Version: react@16.12.0 Browser: Chrome/79.0.3945.88 (Mac OS 10.15)

First of all, great project - exactly what I was looking for!

Unfortunately, when setting showLineNumbers={true} on a CopyBlock, the whole block gets knocked down to below the line numbers.

Code used (after using create-react-app and removing most of the default css styles):

//App.css
.App {
  width: 800px;
  margin: 0 auto;
  margin-top: 30px;
}

//App.js
import React from 'react';
import './App.css';
import { CopyBlock, dracula } from 'react-code-blocks'

const javascriptSnippet = `function toBe() {
  if (Math.random() < 0.5) {
    return true;
  } else {
    return false;
  }
}`;

function App() {
  return (
    <div className="App">
      <CopyBlock
        language='javascript'
        showLineNumbers={true}
        text={javascriptSnippet}
        theme={dracula}
      />
    </div>
  );
}

export default App;

[rajinwonderland]

Hey @rob4neo! Thanks! I had no idea people were using this lol 😅

I’ll look into this right away!

[rajinwonderland]

@rob4neo here’s a demo with v0.0.8-beta version. By adding a codeBlock prop to the component, the alignment looks weird.

I think it was defaulting before to an inline Code component, which generally doesn’t look great with lineNumbers.

The new v0.0.8 also has a customStyle prop too should you run into any issues!

Let me know if this is still an issue!