`docs-demo` fails to compile template with certain actions on elements

I’m trying to re-write my documentation for ember-steps using this addon and am running into trouble with the docs-demo component. For example, this snippet fails to compile in a Markdown file, despite being valid Handlebars

{{#docs-demo as |demo|}}
  {{#demo.example name='cookbook-tabs.hbs'}}
    {{#step-manager as |w|}}
      <button {{action w.transition-to 'first'}}>
        First Tab
      </button>
      <button>
        Second Tab
      </button>

      <hr>

      {{#w.step name='first'}}
        This content is on the first tab
      {{/w.step}}

      {{#w.step name='second'}}
        This content is on the second tab
      {{/w.step}}
    {{/step-manager}}
  {{/demo.example}}

  {{demo.snippet 'cookbook-tabs.hbs'}}
{{/docs-demo}}

It chokes on this part:

<button {{action w.transition-to 'first'}}>
  First
</button>

with the following error:

Closing tag button (on line 7) without an open tag.

Some different variations of the {{action}} also fail, such as this:

<button {{action w.transition-to 'first'}}>
  First
</button>

This one passes compilation, but doesn’t actually do what I want it to

<button {{action w.transition-to}}>
  First
</button>

[samselikoff]

think we should go with #2 for now, especially for docs-demo.

[dfreeman]

Three approaches that come to mind:

1. Investigate other markdown parsers to see if any others place more nicely with our needs
2. Advise people to move their hbs into dedicated local components if it reaches the point of complexity that this issue pops up
3. Preprocess the markdown files before handing them to marked, then do the same thing backwards afterwards e.g.

   # Heading
   {{#some-component as |sc|}}
     <p {{action sc.foo}}>Hello</p>
   {{/some-component}}
   

   # Heading
   <hbs-placeholder-1>
     <p hbs-placeholder-2>Hello</p>
   </hbs-placeholder-1>