Currently I'm working on a Project with Handlebars (JS Template Engine) and I'm using eclipse for development. The problem is, that eclipse doesn't offer syntax highlighting for my Handlebars-Templates. My Templates are enclosed in tags. Syntax highlighting in works as expected.

Screenshot:

Is it possible, that Eclipse also highlights this code (at the best with HTML Syntax Coloring)?

Currently I'm working on a Project with Handlebars (JS Template Engine) and I'm using eclipse for development. The problem is, that eclipse doesn't offer syntax highlighting for my Handlebars-Templates. My Templates are enclosed in tags. Syntax highlighting in works as expected.

Screenshot:

Is it possible, that Eclipse also highlights this code (at the best with HTML Syntax Coloring)?

• javascript
• html
• eclipse
• syntax-highlighting
• handlebars.js

4 Answers 4

If you are using PHP, you can fool Eclipse by adding empty php tag:

<scrip<?php ?>t type="tmpl_handlebars" id="tmpl_places">
    <article> 
       <h1> 
          ...
       </h1>
    </article>
</script>

You would have to find a plug-in which supports that template engine. The HTML Editor provided by Eclipse uses the value of the type/language attributes to find the classes that provide syntax coloring, content assist, etc. The possibility is there, but out of the box, it only provides for JavaScript.

If you are ready do write a little bit of javascript, you can do this. I don't know the framwork(s) that you are using, so I will suppose that you have jQuery, but you can use the idea without using jQuery if you don't want to.

First, write all your tags that serve as template in divs with the "tmpl_handlebars" css class instead of scripts:

<div class="tmpl_handlebars" id="tmpl_places">
    <article> 
       <h1>Hello, World!</h1>
       <p>This is a template...</p>
    </article>
</div>

Then, when your page has loaded, dynamically replace the div tags with the script tags, and transfer the id and the content of the div tags to the script. With jQuery you just have to add this small script in your html head.

$(function() {
    $(".tmpl_handlebars").each(function() {
        var $this = $(this);
        var children = $this.children().detach();
        var id = $this.attr("id");
        $this.replaceWith(
            $('<script type="tmpl_handlebars"/>')
                .attr("id", id)
                .append(children);
        );
    });
});

This may work out of the box, but as I'm not a specialist of mustache and handlebars, I don't know exactly when they process the DOM to find the templates, so if you want to be perfectly safe, you should do this third step: Remove the script tags that include these libraries from the static html of your head, and instead, add them dynamically with javascript after the processing of the divs, so your dom is ready when the scripts arrive.

Before the last }); in the code the divs processing, add the following lines to add your scripts:

$("head").append('<script type="text/javascript"'
          + 'src="**LOCATION_OF_DYNAMICALLY_LOADED_FILE**"></script>'");
//etc...

Similar to @Neparkiraj's answer.

If you are using Django, you can add an empty tag to (I believe) "trick" Eclipse into just thinking the line is just "bad" html. Subsequent lines will then be highlighted with html syntax:

<scrip{{NONEXISTANTVAR}}t type="tmpl_handlebars" id="tmpl_places">
    <article> 
       ...
    </article>
</script>

As the tag is empty, <script type="tmpl_handlebars" id="tmpl_places"> will be perfectly rendered in the final document. Note that, using Django also likely means this code sits in a {% verbatim %} block, so you can bine this code to get:

<scrip{% verbatim %}t type="tmpl_handlebars" id="tmpl_places">
    <article> 
       ...
    </article>
</script>
{% endverbatim %}

All of this is kind of ugly, but leads to both correct HTML highlighting in eclipse and correct rendering in the document.