Unexpected Token Error: HTML escaped characters inside a code element with a js function

[btakita]

<pre><code class="language-js">var hash = {}</code></pre>

Results with a Unexpected token (3:15) error.

https://svelte.dev/repl/0ea02386ddd24db180db65422c4d0400?version=3.4.4

[ktquez]

An alternative would be to use a expression with template strings

<pre><code class="language-js">{`var hash = {}`}</code></pre>

[mrkishi]

I believe this is expected behavior and you're required to use either {, {, {, {, or {'{'} not to open a mustache block.

Assuming we wanted to change this and Svelte was to treat code elements differently, how would one opt-out back to the current behavior? How would one opt-in to that behavior in other elements?

In my opinion, a big reason not to do it is that it wouldn't be very aligned with regular html behavior. A code element is parsed normally and isn't inert, so this could be surprising if we promote the idea that code is text:

<code><script>alert(`your cookies: ${document.cookie}`)</script></code>

However, if it's decided to keep the current behavior, we should definitely provide a better error.

[Conduitry]

+1 for not changing the behavior here. Stuff inside a <code> block is parsed normally in regular HTML, and so should be parsed normally in Svelte - except now this means that {} stuff gets interpreted as expressions. I'm not sure what error message would be better for this. I don't think we should have a different error message for {} when it occurs in a <code> block vs when it appears elsewhere in text. Would a better error message point to the } character saying it's unexpected rather than pointing to the { character?

[btakita]

I'm ok with there being no change as well. It could be confusing if you have a bunch of javascript inside of a <code> block, but I think most people can figure out a good solution.

The issue I ran into was with using marked & codes blocks.
I ended up utilizing return "{@html " + JSON.stringify(html)+"}" to escape any characters.

https://github.com/ctx-core/ctx-core/blob/master/packages/markdown/svelte.js#L51-L70

At least this issue will be indexed by the search engine & a few good options will be presented to anybody who runs into this problem.

[pngwn]

I ran into this with mdsvex, it is a pretty simple process to just replace the curlies with the HTML entity in code blocks, especially with markdown since you pretty much always have access to the renderer for specific blocks. A custom marked renderer or markdown-it plugin solves this.

It definitely shouldn't be considered a bug and 'fixed', people might want to output variables inside of code tags.