如何防止 Svelte 在 <pre> 标签内展平 JSON？

Question

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

一样对待它

也就是说……

我怎样才能把这个内容作为原始内容使用 HTML…

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

并保留马车returns使其呈现白色space，像这样↓?

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

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

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

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

Answer 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>

另见：

How do I prevent Svelte from flattening JSON inside a <pre> tag?