如何在没有 javascript 的情况下在 html 中使用带前置标记的关系缩进？

Question

这是我写的html

<div>
  ...something...
  <div>
    <pre>
    abc{
      efg
    }
    <pre>
  </div>
</div>

浏览器将其显示为 pre（绝对缩进）的内容。

    abc{
      efg
    }

但我想要的是这个（来自 pre 标记的关系缩进）

abc{
  efg
}

有人用 Google 搜索了我，有人用很少的 javascript 代码解决了这个问题。
但如果可能的话，我想在没有js的情况下解决这个问题。
我如何在没有 javascript 的情况下使用关系缩进？

我在 js 的模板文字中也有完全相同的问题。
代码

text = `
       abc
         def
       `

我想要的

abc
  def

我真的得到了

       abc
         def

有没有办法使用关系缩进或换行符之类的缩进字符？

Answer 1

原因是您的 HTML 文件中的制表符或空格。

您的 IDE 可能正在为您格式化 HTML，通常 HTML 会忽略空格，但前置标签是所见即所得的。

解决方法：

<div>
  <div>
    <pre>
abc
  def
    </pre>
  </div>
</div>

它很难看，您可能必须配置 IDE 以停止为您格式化 HTML，但这是非 javascript 解决方案。