Edit in JSFiddle

can.Component.extend({
    tag: 'x-markdown',
    template: '<div>{{{html}}}</div>',
    scope: {
        html: can.compute(function() {
            var markdown = this.attr('markdown');
            var converter = new Showdown.converter();
            var html = converter.makeHtml(markdown);
            return html;
        }),
        markdown: ''
    }
});

can.Component.extend({
    tag: 'x-textarea',
    template: '<textarea rows="10" cols="40" can-value="value"></textarea>',
    scope: {
        value: ''   
    },
    events: {
        'textarea keyup': function(el) {
            el.trigger('change');   
        }
    }
});

$('#main').html(can.view('commenter', {
    value: can.compute('#Hello world')
}));

<div id="main"></div>

<script id="commenter" type="text/mustache">
<x-textarea value="value"></x-textarea>
<x-markdown markdown="value"></x-markdown>
</script>

x-markdown {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
  Helvetica, Arial, "Lucida Grande", sans-serif;
}