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

【问题标题】：Adjust `prism.js` code snippet box width according to text width根据文本宽度调整 `prism.js` 代码片段框宽度
【发布时间】：2021-12-30 06:33:02
【问题描述】：

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

只是意味着我只想根据里面的文本宽度设置黑框宽度，所以请建议我这样做......

【问题讨论】：

标签： javascript html css prismjs

【解决方案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>

【讨论】：