Handlebars formatting in NetBeans

Question

I'm using NetBeans as my IDE for a Ember.js project. When I create handlebars templates in my app like below the code highlighting doesn't work correctly.

<script type="text/x-handlebars">
     <div>
     </div>
</script>

Normally, when I'd select the first div, it and its matching end tag would highlight yellow, but this doesn't work. Since its inside the handlebars script tag both are highlighted red as errors and don't match together. This makes writing complex templates kinda annoying as it can be difficult to pinpoint syntax errors.

Is there anyway to get NetBeans to highlight inside the handlebars tag as if its regular html?

Answer 1

One option, until Netbeans implements this enhancement, is to add the following script tag in index.html immediately after your reference to jQuery:

<script src="js/libs/jquery.js"></script>
<!-- use following line to change script type to 'text/x-handlebars' -->
<script>jQuery('script[type="text/html"]').attr('type', 'text/x-handlebars');</script>

This is a variation of the answer provided by GCoda.

Answer 2

I had the same problem and tried various non satisfying fixes.

In the end I figured the best solution is simply to change the script's type attribute to text/html:

<script type="text/html">
     <div>
     </div>
</script>