Ember.JS Syntax Highlight XML Document - ember.js

Question

I'm using Ember and Highlight.JS and I want to dynamically edit an XML document and show a syntax highlighted version in a live preview. Currently I have a preview, but the code is not syntax highlighted.
<script type="text/x-handlebars">
<p>Name {{input type="text" value=name}}</p>
Non-Syntax Highlighted output
<pre>
<person>
<name>{{name}}</name>
</person>
</pre>
</script>
<script type="text/x-handlebars" data-template-name="myxmltemplate">
<person>
<name>{{name}}</name>
</person>
</script>
JSBin with this code
To get syntax highlighting, I need to render myxmltemplate above to a string, not directly to the page. This string can be fed into highlightjs to be turned into syntax highlighted HTML. How can I do this?

Answer 1

The problem is that the template gets inserted / rendered after highlight.js has initialized. Therefore you need initialize the highlighting every time the view gets rendered. This can easily be done using the Ember.Views didInsertElement hook.
App.ApplicationView = Ember.View.extend({
didInsertElement: function() {
// From http://highlightjs.org/usage/ see Custom Initialization
this.$('pre').each(function(i, e) {hljs.highlightBlock(e)});
}
});
JSFiddle: http://emberjs.jsbin.com/masomafu/2/edit