Using Svelte, how can I escape curly braces in the HTML?

Question

I want to be able to show a code example in my Svelte component, but the example has curly braces, i.e



Here's a sample function

  function test(e) {
    console.log(e)
  }

Notice how the function has curly braces? That seems to be confusing the Svelte compiler. Is there a way to escape those other than this?



Here's a sample function

  function test(e) {'{'}
    console.log(e)
  {'}'}

user_5941620 · Answer

I know of 3 ways to escape curly braces in Svelte:

Using {'{'} and {'}'} (What you're already doing)
Using { and }

or { and }

or { and }
Using template literals

You could wrap your whole code inside a template literal.

Examples on svelte.dev's REPL (Partly because I'm having a hard time escaping characters here on SO...)

Discussions on the subject on GitHub:

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

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

My example on svelte.dev's REPL copy/pasted here just in case something happens to it...

Escaping every curly brace

  function test(e) {'{'}
    console.log(e)
  {'}'}



Wrapping the whole code block in a string literal

  {`
  function test(e) {
    console.log(e)
  }
  `}



Using { and }

  function test(e) {
    console.log(e)
  }

Using Svelte, how can I escape curly braces in the HTML?

1 Answers