如何防止Svelte在<pre>标签内自动扁平化JSON并丢失原始格式？

你可以选择以下任意一种方案实现需求，都能同时解决报错和空白格式丢失的问题：

• 方案1（静态内容首选，写法最简单）：将JSON内容放在模板字符串中，通过Svelte的表达式输出

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

模板字符串会原生保留所有换行、缩进等空白格式，外层的大括号是Svelte的输出标记，不会解析内部的JSON大括号为可执行代码。

• 方案2（纯HTML写法，无JS逻辑）：将所有左大括号替换为HTML实体{，右大括号可按需替换为}

<pre>
&#123;
  "num": 2,
  "obj": &#123; "foo": "bar" &#125;
&#125;
</pre>

替换实体后Svelte不会将大括号识别为语法标记，pre标签会正常保留所有空白格式。

• 方案3（动态JSON内容首选）：如果内容是动态生成的JS对象，直接用JSON.stringify的缩进参数控制格式

<script>
  const data = {
    num: 2,
    obj: { foo: "bar" }
  }
</script>

<pre>{JSON.stringify(data, null, 2)}</pre>

JSON.stringify的第三个参数指定缩进用的空格数，输出的字符串会自带正确的换行和缩进。

内容的提问来源于stack exchange，提问作者Navelgazer