javascript - 根据文本宽度调整 `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>