How can I use relational indent with pre tag in html without javascript?

Question

I wrote this html

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

and browser show me this as contents of pre (absolute indent).

    abc{
      efg
    }

but what I want is this (relational indent from pre tag)

abc{
  efg
}

I was searched with Google and someone solve this with little javascript code.
But I want to solve this without js if it's possible.
How can I use relational indent without javascript?

I also have exactly same problem in js's template literal.
code

text = `
       abc
         def
       `

what I want

abc
  def

I actualy got

       abc
         def

Is there any way using relational indent or indent character like newline?

Answer 1

The reason for this is the tabs or whitespace in your HTML file.

Your IDE might be formatting your HTML for you and generally HTML ignores whitespace, but pre tags are WYSIWYG.

The solution:

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

It's ugly, and you may have to configure your IDE to stop formatting your HTML for you, but that's the non-javascript solution.