javascript - Text is overflowing in code tag instead of scroll

Question

Use of rainbow.js to highlight the code causing code in <code> tag to overflow (x). CSS overflow property doesn't seem to work (even with !important)

Code containing <code> tag

<pre>
    <code>
            Any code to be highligted
    </code>
</pre>

CSS :

code {
    overflow: auto; /* Not working (scroll also not working) */
    width: 100%;
}

Replacement of <code> tag with <div> eliminates the overflow problem but highlighting doesn't work (this plugin requires code to be put in <code> tag)

How can I resolve this overflow issue to provide scroll? Or do I need to use any other code highlighting library?

• With code tag (highlight yes, scroll no) Overflow • With div tag (highlight no, scroll yes)

Answer 1

Instead of using the overflow property in the code element, you should use it in the pre element.

pre, by default, has white-space: pre declaration, which renders new lines only if the HTML inside has a <br> tag or a newline character, and that's why the text won't break if reaches the limit of the parent element. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space for more details.

So, using overflow: auto in the pre element should solve it :)

Answer 2

code {
  white-space: pre-line;
 }

I got the same overflow issue. This works well for me.