Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Responsiveness Issue with small screen width

See original GitHub issue

Responsiveness Issue The line number and code string overlap when a small width is active.

To Reproduce Simply drag the browser window to minimize the screen width to a minimum

Code Sample

const codeString = `// initialize fizz
IFizzClient fizzClient = IFizzClient::instance();
fizzClient.init("YOUR-APP-ID", "YOUR-APP-Secret",
  "writablePath to keep session logs required by fizz c++ client");

// add listener
fizzClient.chat()->listener()->addOnMessagePublishedListener([=](FizzChannelMessagePtr message) {
  // messages received will be notified here
}, "Your Custom Key for Listener");

// open connection and send message
fizzClient.open("userId", FizzLanguageCodes.English, FizzServices.All, [=](IFizzErrorPtr openError) {
  std::map<std::string, std::string> dataMap;
  bool translate = true, persist = true, filter = true;

  fizzClient.chat()->publishMessage("channelId", "userNick", "msgText",
    dataMap, translate, persist, filter, [=](IFizzErrorPtr publishError) {
  });
});`

<SyntaxHighlighter
        style={xcode}
        language={'cpp'}
        showLineNumbers={true}
        customStyle={{
                      margin: 0,
                      wordBreak: 'break-all',
                      whiteSpace: 'pre-wrap',
                      boxShadow: '0px 2px 4px rgba(50,50,93,.1)'
        }}
        lineNumberStyle={{
                      color: '#5dc79e',
                      textAlign: 'right',
                      marginLeft: '-0.5em',
                      background: '#f2feef',
                      padding: '0 10px 0 10px'
        }}
>
                    {codeString}
</SyntaxHighlighter>

Current behavior reactSyntax

Expected behavior runKit

Issue Analytics

State:
Created 4 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

patmigliacciocommented, Oct 16, 2019

See the following solution, may lend to what could to be updated in the internals.

<SyntaxHighlighter lineProps={{className: 'code-line'}}>
  {codeString}
</SyntaxHighlighter>

  code {
    counter-reset: line;
  }

  .code-line {
    counter-increment: line;
    position: relative;
    display: block;
    margin-left: 1.5rem;
  }

  .code-line:before {
    content: counter(line);
    position: absolute;
    margin-left: -1.5rem;
  }

It ignores the showLineNumbers prop and sets them via CSS instead of rendering elements in the DOM.

If I find some time this week, will try to see if I can implement.

0reactions

simmerercommented, Jul 31, 2020

This is fixed by adding the showInlineLineNumbers prop, available as of react-syntax-highlighter 13.0.0+.

<SyntaxHighlighter
        style={xcode}
        language={'cpp'}
        showLineNumbers={true}
        showInlineLineNumbers={true} // <-- add this prop!
        customStyle={{
                      margin: 0,
                      wordBreak: 'break-all',
                      whiteSpace: 'pre-wrap',
                      boxShadow: '0px 2px 4px rgba(50,50,93,.1)'
        }}
        lineNumberStyle={{
                      color: '#5dc79e',
                      textAlign: 'right',
                      marginLeft: '-0.5em',
                      background: '#f2feef',
                      padding: '0 10px 0 10px'
        }}
>
                    {codeString}
</SyntaxHighlighter>