如何防止 Svelte 在 <pre> 标记内展平 JSON？答案

【问题标题】：How do I prevent Svelte from flattening JSON inside a <pre> tag?如何防止 Svelte 在 <pre> 标记内展平 JSON？
【发布时间】：2021-09-20 20:52:26
【问题描述】：

如this REPL 中所示，在<pre> 标签之间插入 JSON 会导致错误。我的问题是 going 是，“这个错误是怎么回事？”，但后来我意识到单括号被 Svelte 视为可执行代码（duh），所以我不能只处理它像 HTML。

那是说……

我如何获取这个内容，它可以作为原始 HTML 正常工作......

<pre>
{
  "num": 2,
    "obj": { "foo": "bar" }
}
</pre>

并保留回车符，以便它使用空格呈现，就像这样↓？

{
  "num": 2,
    "obj": { "foo": "bar" }
}

注意：我的first attempt 克服了错误，但在pre 标签可以保护它之前清除了所有空白：

{"num":2,"obj":{"foo":"bar"}}

希望我在这里遗漏了一些非常简单的东西。 ????

【问题讨论】：

<pre>{JSON.stringify({ "num": 2, "obj": { "foo": "bar" }}, null, 2)}</pre>，或将其分配给<script> 部分中的变量作为模板文字。 REPL
啊！我发现很难记住包含null, 2。感谢@pilchard 的提醒！

【解决方案1】：

这是我想到的三个选项。

代码块内的直接template literal。

<pre>{`{
  num: 2,
  obj: { "foo": "bar" }
}`}
</pre>

在脚本部分声明的模板文字

<script>
    let json = `{
  num: 2,
  obj: { "foo": "bar" }
}`
</script>

<pre>{json}</pre>

JSON.stringify()

<pre>{JSON.stringify({ "num": 2, "obj": { "foo": "bar" }}, null, 2)}</pre>

【讨论】：