div 中显示的格式代码

Question

我正在构建一个基于 Javascript 的 UI 来生成基于 UI 的代码。我让代码生成工作了。代码保存在一个字符串中。我试着格式化它，缩进它，但我不知道怎么做了。有没有办法把代码格式化出来？

例如，如果我有这个字符串：

"<body><div><h1>Hi</h1></div></body>"

这样输出：

<body>
  <div>
    <h1>
      Hi
    </h1>
  </div>
</body>

现在我的输出是这样的：

$(".output").text(string);

Answer 1

查看 html 中的代码标记。显示由代码标签包裹的字符串

<code>your string</code>

如果您正在尝试实现格式化输出，请查看模板文字

Answer 2

.text() 用于更改任何标签的文本。

$(".output").text(string);

.html() 用于添加带有标签的字符串。

$(".output").html(string);

Answer 3

如果要显示正确缩进和着色的代码，可以使用库来实现，例如 highlighjs。

我不确定它是否自动缩进，但算法并不难：在打开新的 html 标签时只需添加换行符和足够的空格（递归将使这种方式更容易） .

此外，您可以使用 js-beautify。

Format code that is displayed in div