Glimmer for highlight.js

    <Nested::Component
  class="some classes
    {{if (this.someHelper this.foo 12)
       "classes when true"
       "classes when false"
    }}
  "
  @doAction={{fn this.someAction 120}}
  @argB={{hash
    foo="string"
    bar=true
    baz=120
    yolo=(array 12 "string" (hash foo=this.something))
    bax=(fn this.someAction 120)
  }}
  {{resize this.handleResize (fn this.idk 2 "str")}}
  as |foo|
>
  <:block as |foo, baz|>
    {{foo}}

    {{#let foo.bar 12 as |fooBar num|}}
      <fooBar @num={{num}} @arg={{12}} />
    {{/let}}

    {{! comment }}
    {{!-- block }}
      TODO: Indentation is broken after that
      comment --}}

    <baz.component />
  </:block>
</Nested::Component>

<input {{on 'input' (fn this.doSomething 12 "string")}}

{{#each-in this.keyedCollection as |key value|}}
  {{this.localHelper (global-helper key value)}}
{{/each-in}}

{{#each this.listCollection as |value|}}
  <button
    type="button"
    {{on "click" (fn this.handleClick value)}}
  >
    {{value}}
  </button>
{{/each}}

{{#block-component
    property=@value
    prop-erty=this.value
    string="testing"
    onClick=(action "someAction" withParam)
    as |returnValue|
}}
  {{#if foo}}
    {{escaped handlebars}}
  {{else}}
    <a
      href="#"
      class="{{if inside 'still highlight'}}"
      onclick={{action foo}}
    >

      {{escaped}}
      {{{unescaped}}}

    </a>
    {{textarea}}
  {{/if}}
{{/block-component}}


<style data-demo="true" data-x={{(foo "bar")}}>
  button {
    font-weight: bold;
    text-decoration: underline;
    color: red;
    background: #554433;
  }

  [type="button"] {
    border: 1px solid;
  }
</style>