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

我写了这个html

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

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

我被谷歌搜索到，有人用一点javascript代码解决了这个问题。
但如果可能的话，我想在没有js的情况下解决这个问题。
在没有javascript的情况下如何使用关系缩进

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

我想要什么

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

我真的

---

有没有办法使用关系缩进或像换行符这样的缩进字符？

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

IDE可能正在为您格式化HTML，通常HTML会忽略空白，但前置标记是WYSIWYG

解决方案：

abc
def

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

abc{
  efg
}

text = `
       abc
         def
       `

abc
  def

       abc
         def

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