How do i set width for the codebox (PrismJS)

Question

So i am basically trying to set width for the codebox (i am using prismJS), when i add too big of a code it breaks everything and the width and height get increased. I want the width and height to be specified so if the code is too long it just adds a scrollbar.

This is how big i want the codebox to be: pic

<div class="container">
    <div class="post-header">SOME HEADER</div>
  
    <div class="post-content">
  
      <p> <pre><code class="language-js">
        
      </code></pre>
        <p>
        
  
    <img class="image-content">
    <div class="post-content">
      
    </div>
  </div>

score 0 · Answer 1 · answered Oct 08 '22 at 23:59

0

You need to add a CSS property to your code box

overflow: scroll;

answered Oct 08 '22 at 23:59

Haim Abeles

982
6
19

i added `pre { overflow: scroll;}` and it didn't do anything. The codebox still covers the entire page This is how it looks after actually adding the full code that i want to in the codebox: [pic](https://imgur.com/a/3ggp9tu) – Gamer-XyZ Oct 09 '22 at 00:09
You of course need to add width and height to the code box for it to work – Haim Abeles Oct 09 '22 at 00:24

score 0 · Answer 2 · answered Oct 09 '22 at 00:23

0

added<div style="height:200px;width:800px;overflow:auto"> next to pre tag, that seems to have fixed the issue.

answered Oct 09 '22 at 00:23

Gamer-XyZ

1

How do i set width for the codebox (PrismJS)

2 Answers2