Подсветка синтаксиса Eclipse для HTML файлов с помощью <script type = "tmpl_handlebars" >

В настоящее время я работаю над проектом с Handlebars (JS Template Engine), и я использую eclipse для разработки. Проблема в том, что eclipse не предлагает подсветку синтаксиса для моих Handlebars-Templates. Мои шаблоны заключены в теги. Выделение синтаксиса в работах, как ожидалось.

Снимок экрана:

Возможно ли, что Eclipse также выделяет этот код (в лучшем случае с помощью раскраски синтаксиса HTML)?

Ответ 1

Если вы используете PHP, вы можете обмануть Eclipse, добавив пустой тег php:

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

Ответ 2

Вам нужно будет найти плагин, который поддерживает этот механизм шаблонов. Редактор HTML, предоставленный Eclipse, использует значение атрибутов type/language для поиска классов, которые предоставляют синтаксическую раскраску, поддержку содержимого и т.д. Возможность существует, но из коробки она предоставляет только JavaScript.

Ответ 3

Если вы готовы написать немного javascript, вы можете это сделать. Я не знаю фреймворк (ы), который вы используете, поэтому я предполагаю, что у вас есть jQuery, но вы можете использовать эту идею, не используя jQuery, если вы этого не хотите.

Сначала напишите все свои теги, которые служат шаблоном в divs с классом css "tmpl_handlebars" вместо скриптов:

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

Затем, когда ваша страница загрузится, динамически замените теги div тегами script и перенесите идентификатор и содержимое тегов div в script. С jQuery вам просто нужно добавить этот небольшой script в ваш html-заголовок.

$(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);
        );
    });
});

Это может работать из коробки, но поскольку я не специалист усов и рулей, я не знаю точно, когда они обрабатывают DOM, чтобы найти шаблоны, поэтому, если вы хотите быть в полной безопасности, вы должен сделать этот третий шаг: удалите теги script, которые включают эти библиотеки из статического html вашей головы, и вместо этого добавьте их динамически с помощью javascript после обработки div, поэтому ваш dom будет готов, когда появятся скрипты.

До последнего }); в коде обработка divs добавьте следующие строки, чтобы добавить ваши скрипты:

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

Ответ 4

Как и @Neparkiraj ответ.

Если вы используете Django, вы можете добавить пустой тег в (я считаю) "трюк" Eclipse, просто думая, что линия - это просто "плохой" html. Последующие строки затем будут выделены синтаксисом html:

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

Поскольку тег пуст, <script type="tmpl_handlebars" id="tmpl_places"> будет отлично отображаться в конечном документе. Обратите внимание, что использование Django также, вероятно, означает, что этот код находится в блоке {% verbatim %}, поэтому вы можете комбинировать этот код, чтобы получить:

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

Все это отвратительно, но приводит к исправлению HTML-заголовка в eclipse и правильному рендерингу в документе.