使用 Svelte，如何在 HTML 中转义花括号？

Question

我希望能够在我的 Svelte 组件中显示一个代码示例，但该示例有花括号，即

<script>
//no JS needed
</script>

<p>Here's a sample function</p>
<pre><code>
  function test(e) {
    console.log(e)
  }
</code></pre>

注意函数是如何有花括号的？这似乎让 Svelte 编译器感到困惑。除了这个，还有什么方法可以逃脱吗？

<script>
//no JS needed
</script>

<p>Here's a sample function</p>
<pre><code>
  function test(e) {'{'}
    console.log(e)
  {'}'}
</code></pre>

Answer 1

我知道在 Svelte 中转义花括号的 3 种方法：

1. 使用{'{'}和{'}'}（你已经在做什么）

2. 使用{和}

   或{和}

   或{和}

3. 使用模板文字

   您可以将整个代码包装在模板文字中。

svelte.dev 的 REPL 示例 （部分原因是我很难在 SO 上转义字符...）

GitHub 上关于该主题的讨论：

https://github.com/sveltejs/svelte/issues/2924

https://github.com/sveltejs/svelte/issues/1318

我在 svelte.dev 的 REPL 上的示例复制/粘贴到这里，以防万一它发生了什么......

<h3>Escaping every curly brace</h3>
<pre><code>
  function test(e) {'{'}
    console.log(e)
  {'}'}
</code></pre>


<h3>Wrapping the whole code block in a string literal</h3>
<pre><code>
  {`
  function test(e) {
    console.log(e)
  }
  `}
</code></pre>


<h3>Using &#123; and &#125;</h3>
<pre><code>
  function test(e) &#123;
    console.log(e)
  &#125;
</code></pre>