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

December 30, 2021

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.stack.imgur.com/EDSVQ.jpg

Expected Output :

Expected Output => https://i.stack.imgur.com/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……

Hope I am able to make you understand.

Thanks in advance.

>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>