Podświetlanie składni Eclipse dla plików HTML za pomocą <script type = "tmpl_handlebars">

Question

Obecnie pracuję nad projektem z Handlebars (JS Template Engine) i używam Eclipse do programowania. Problem polega na tym, że zaćmienie nie oferuje podświetlania składni dla moich szablonów kierownicy. Moje szablony są zawarte w tagach. Podświetlanie składni działa zgodnie z oczekiwaniami.

Zrzut ekranu:

Czy to możliwe, że Eclipse podkreśla również ten kod (w najlepszym z kolorowanie składni HTML)?

Answer 1

Jeśli używasz PHP można oszukać Eclipse przez dodanie pustego tagu php:

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

Answer 2

Trzeba by znaleźć plug-in, który obsługuje tego silnika szablonów. Edytor HTML dostarczony przez Eclipse używa wartości atrybutów typu/języka do znalezienia klas, które zapewniają kolorowanie składni, pomoc w zakresie treści itp. Istnieje możliwość, ale po wyjęciu z pudełka zapewnia tylko JavaScript.

Answer 3

Jeśli jesteś gotowy, napisz trochę javascript, możesz to zrobić. Nie znam ramek, z których korzystasz, więc przypuszczam, że masz jQuery, ale możesz użyć tego pomysłu bez używania jQuery, jeśli nie chcesz.

pierwsze, napisać wszystkie tagi, które służą jako szablon w div z „tmpl_handlebars” klasa css zamiast skryptów:

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

Wtedy, gdy strona jest ładowany dynamicznie zastąpić znaczniki div ze skryptem tagi i przenieść identyfikator i zawartość znaczników div do skryptu. Z jQuery wystarczy dodać ten mały skrypt w nagłówku 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); 
     ); 
    }); 
}); 

może działać po wyjęciu z pudełka, ale nie jestem specjalistą z wąsami i kierownicy, nie wiem dokładnie, kiedy przetwarzają one DOM, aby znaleźć szablony, więc jeśli chcesz być całkowicie bezpieczny, powinieneś zrobić ten trzeci krok: usuń tagi skryptów, które zawierają te biblioteki ze statycznego html twojej głowy, a zamiast tego dodaj je dynamicznie za pomocą javascript po przetworzeniu div, więc twoja dom jest gotowa po otrzymaniu skryptów .

Przed ostatnim }); w kodzie przetwarzania div, dodać następujące wiersze dodać skrypty:

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

Answer 4

Podobne do @ odpowiedź Neparkiraj użytkownika.

Jeśli korzystasz z Django, możesz dodać pustą etykietkę do (uważam) "podstęp" Eclipse do samego myślenia, że ​​linia jest po prostu "złym" html. Kolejne linie zostaną podświetlone html składnią:

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

Jako znacznik jest pusty, <script type="tmpl_handlebars" id="tmpl_places"> będą doskonale renderowane w dokumencie końcowym.Należy pamiętać, że korzystając Django również prawdopodobnie oznacza to kod siedzi w {% verbatim %} bloku, więc można połączyć ten kod, aby uzyskać:

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

Wszystko to jest rodzaj brzydki, ale prowadzi zarówno do prawidłowego HTML podkreślając w Eclipse i poprawne renderowanie w dokumencie.