javascripthtmlcssprismjs

Adjust `prism.js` code snippet box width according to text width

My HTML is as follows:

<link href="https://snip-share.herokuapp.com/static/css/prism.css" rel="stylesheet" />

<pre><code class="language-Python line-numbers">import time

print(time.time())</code>
</pre>
<script src="https://snip-share.herokuapp.com/static/js/prism.js"></script>

Output of above code:

Output of above code => https://i.sstatic.net/EDSVQ.jpg

Expected Output:

Expected Output => https://i.sstatic.net/7esAU.png

Simply means I just want to set the black box width according to the text width inside it, so kindly suggest me any way to do so...

Solution

  • Wrap the content with a container element and apply display: inline-block to it.

    div {
  display: inline-block;
}
    <link href="https://snip-share.herokuapp.com/static/css/prism.css" rel="stylesheet" />

<div>
  <pre><code class="language-Python line-numbers">import time

print(time.time())</code>
</pre>
</div>
<script src="https://snip-share.herokuapp.com/static/js/prism.js"></script>