How to prevent the weird escaping of backquotes in HTML cells?

[galopin]

Describe the bug

It seems that backquotes are automatically escaped in HTML cells ⁉️
I don't get the rationale behind this behavior…

To Reproduce

1. Insert a new HTML cell as follows:

\`\`

<oops>``</oops>

2. Insert another cell as follows:

``

html`<oops>\`\``

3. Compare the output…

4. It gets even worse when querying the text content of the above nodes:

Array(2) [ 0: "\\`\\`" 1: "``" ]

Array.from(document.querySelectorAll("oops")).map((elt) => elt.textContent)

Expected behavior

I expect the output to be the same whether I use a JavaScript or HTML cell, e.g. ``

[mootari]

Output comparison:

Appears to be limited to uninterpolated backticks in HTML cells.

[mootari]

I believe the following is happening here:

1. The HTML cell compiles to

   htl.html`<i>\`\`</i>`

2. When passed to a template tag function, JS treats the sequence \` as two separate characters.

[galopin]

That's it. A clumsy but temporarily effective work-around would be to use a Markdown cell to prevent this from happening… Thank you! 🍺

[lionel-rowe]

This is a general limitation of tagged template literals that use the raw value of the string.

The only way to interpolate a backtick into a raw tagged template literal is to pass it as an interpolated value:

`a\`b` // a`b
String.raw`a\`b` // a\`b (literal backslash)
String.raw`a${'`'}b` // a`b

It's true that library maintainers can implement their own logic to transform \` into ` within raw string segments, but that's not the default behavior.

[mbostock]

This is not a bug in HTL but rather in the Observable compiler. Thank you for the report; I will file an appropriate internal bug and transfer this to the feedback repository.

[mbostock]

Apologies for the delay here. We have a fix for this now and it should be released next week.

[galopin]

Excellent!

[mbostock]

Confirmed that this is now fixed. Thank you for the report!