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

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

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

html

javascript

css

prismjs