如何重置<pre><code>内的标签？

Question

我有一个多层次的 div 结构，我想利用 <pre> 和 <code> 来使用一些语法。

基本上，它看起来类似于：

<div class="one">
  <div class="two">
     <div class="three">
        <pre class="syntax-hl">
          <code>
            //my JS code here
          </code>
        </pre>
     </div>
  </div>
</div>

我看到的是，当它呈现时，它会保留所有选项卡并将整个代码块 (4) 个选项卡移入，而不是预期结果只有 1 个。

我试过应用不同的 white-space 设置，实际上它们 trim 前导 space 的设置是有效的，但是当它们删除前导白色 space, 他们也失去了所有标签。

有没有人遇到过这个问题，或者知道解决它的方法？

这是一个非常简单的示例，您可以使用它来解释我要修复的问题。 https://jsfiddle.net/d3e26p0w/

Answer 1

一个解决方案是将 border 移动到 pre，然后您可以随意给 code 一个负的左边距。

pre.syntax-hl {
  margin: 2rem;
  border: 1px solid red;
}

pre.syntax-hl > code {
  display: block;
  width: 100%;
  margin-left: -6ch;
}

<div class="one">
  <div class="two">
    <div class="three">
      <pre class="syntax-hl"><code>
        request.onload = function() {
          if (request.status >= 200 &amp;&amp; request.status &lt; 400) { 
            // Success! var data=JSON.parse(request.responseText); 
          } else { 
            //We reached our target server, but it returned an error 
          }
        }; 
      </code></pre>
    </div>
  </div>
</div>

但是要回答你的问题，不，<code> 块内的缩进不是从父级的缩进开始的；在 CSS 中，您无法使缩进取决于 <pre> 在源代码行中的位置。

如何重置<pre><code>内的标签？

How to reset the tabs inside <pre><code>?

html

css

whitespace

removing-whitespace