Creating a raw html component in Ember 2.0

Question

I'm attempting to make a design guide where I show code as html or css.

My understanding is that I should be making a component because I can use the {{yield}} to get the code do display like below.

Usage:

{{#raw-output}}
  <div>test</div>
{{/raw-output}}

components/raw-output.hbs:

<pre>
<code>
    {{{yield}}}
</code>
</pre>

My only issue is that I cannot figure out how to output the raw code in HtmlBars.

EDIT: Final product

//raw-output.js
import Ember from 'ember';

export default Ember.Component.extend({
    didInsertElement: function () {
        var $element = $(this.get('element')), 
        $code = $("code", $element), 
        html = $code.html();
        $code.empty().text(html);
    }
 });

//raw-output.hbs

<code>
    {{{yield}}}
</code>


//usage
{{#raw-output}}
    <div>name</div> 
{{/raw-output}}

Answer 1

You can use it in the same way as you mentioned. In the didInsertElement of your component, get the code lines, escape them and then show the escaped lines.

Working Example : Twiddle