根据文本宽度调整`prism.js`代码段框宽度

Question

我的HTML如下所示：

​

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

​

上述代码的输出：

上述代码=> https://i.stack.imgur.com/EDSVQ.jpg的输出

预期输出：

预期输出=> https://i.stack.imgur.com/7esAU.png

简单地说，我只是想设置黑匣子的宽度根据里面的文字宽度，所以请建议我这样做的任何方法。

Answer 1

用容器元素包装内容，并将display: inline-block应用于它。

​

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>

​