Question: Do curlies in always have to be escaped in prism, in a .hbs file?

[amyrlam]

👋 I made this repro https://github.com/hashicorp/flight/pull/367, am wondering if this is a limitation of PrismJS or if you had any insights?

Curlies do not display (nothing displays in their place, no error):

<CodeBlock
  @language="markup"
  @code=' 
    <FlightIcon @name="zap" @size="24" @stretched={{true}} />
  '
/>

Curlies do not display, using https://prismjs.com/plugins/unescaped-markup/:

    <script type="text/plain" class="language-markup">
<FlightIcon @name="triangle-fill" @isInlineBlock={{false}} />
    </script>

This syntax does work for me:

<CodeBlock
  @language="markup"
  @code='
    <FlightIcon @name="triangle-fill" @isInlineBlock=&lbrace;&lbrace;false&rbrace;&rbrace; />
  '
/>

Aside: It seemed like there was better syntax highlighting using @language="markup" vs @language="markup".

If you have any insight please LMK!

[amyrlam]

*I meant for language, markup seemed better highlighting than handlebars, thx @didoo for pointing out the typo

[amyrlam]

I figured out a fix to this thanks to my colleague, @meirish (you the real MVP! :pray:) and will submit a PR. This syntax works:

    {{! prettier-ignore-start }}
    {{! template-lint-disable no-triple-curlies }}
    <CodeBlock
      @language="markup"
      @code={{{'
        <FlightIcon @name="zap" @size="24" @stretched={{true}} />
      '}}}
    />
    {{! prettier-ignore-start }}
    {{! template-lint-enable no-triple-curlies }}

Helpful article he shared that I can propose including: https://michaelsoolee.com/ember-unescaped-html/

[RobbieTheWagner]

@amyrlam thanks for opening an issue! Is the same true if you put the code in a string variable first and do something like @code={{this.myCode}}? I would try that and/or escaping the curlies with \.

[amyrlam]

@rwwagner90 Thanks for the reply, much appreciated, that's a good idea!

I'm going to stick with this syntax for now, so that say a future "Edit on GitHub" button can have everything on the docs page editable in the .hbs file.

@code={{{'
  <FlightIcon @name="zap" @size="24" @stretched={{true}} />
'}}} 

I can add a note to the README in a PR if useful? (If not useful, can close the issue as solved.) Just let me know!

[RobbieTheWagner]

@amyrlam it couldn't hurt to have this info captured in the README. A PR would be great!