'Text is overflowing in code tag instead of scroll

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 code tag (highlight yes, scroll no ) • With div tag (highlight no, scroll yes) With div tag (highlight no, scroll yes)

javascripthtmlcssrainbow-js


Solution 1:[1]

code {
  white-space: pre-line;
 }

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Viet V.

Related Questions