javascript - 缩进 `pre` 代码块中的后续行

Question

在大多数现代文本编辑器中，长行文本被精美地包裹在与其开始相同的缩进级别。

括号中的屏幕截图:

同理，有界面元素，为了更好理解:

但是在 CSS 中，使用 pre { white-space: pre-wrap; }，长行缩进到窗口的左侧:

<style>
pre {white-space: pre-wrap}
</style>

<pre>
function() {
    if (a == b) {
        alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
    }
}
</pre>

结果:

显然，阅读起来不是很方便。

这就是为什么大多数人使用 pre { overflow-x: auto; } 而不是 pre { white-space: pre-wrap; 用于他们构建的网站中的代码块。

是否可以用 CSS/JS 模拟类似于 Brackets 的东西？

此外，这个问题可能在某些库中得到了解决，例如 Google Prettify，但我不知道。

Answer 1

你可以像这样使用 css:

p {
  margin-left: 100px;
}

或引用这个 - https://css-tricks.com/multi-line-padded-text/