javascript - 如何在不牺牲空格的情况下缩进代码

Question

我有以下 HTML5 代码。

        <code>
            public class Testing {
                public static void main(String[] args) {
                    System.out.println("Hello World");
                }
            }
        </code>

但是在页面上，它将它放在一行中并且没有使用正确的缩进。

我知道我可以使用 <pre>标记以使其按我想要的方式工作，但使用该标记的问题是它会将代码向右缩进太多，如果我将代码向左移动，它会弄乱 HTML 的空白和缩进代码。无论如何我可以让代码以我想要的方式出现在页面上，而不必牺牲空白和干净的 HTML 代码？谢谢。

编辑:这与潜在的重复项不同，因为它使用了 pre 标签并且没有解决牺牲空白的问题。

Answer 1

添加一个 css 规则，根据您的喜好格式化 pre 标签。

.code {
  margin: 0 0 0 -0.5em;
}

<pre>
  standard
<pre>

<pre class="code">
  styled
<pre>