Destacado de sintaxis de Eclipse para archivos HTML con <script type = "tmpl_handlebars">

Question

Actualmente estoy trabajando en un proyecto con manubrios (motor de plantillas JS) y estoy usando eclipse para el desarrollo. El problema es que ese eclipse no ofrece resaltado de sintaxis para mis Plantillas de manubrios. Mis plantillas están encerradas en etiquetas. El resaltado de sintaxis funciona como se espera.

Captura de pantalla:

¿Es posible, que Eclipse también destaca este código (en el mejor de sintaxis para colorear con HTML)?

Answer 1

Si está utilizando PHP, se puede engañar a Eclipse mediante la adición de etiquetas php vacío:

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

Answer 2

que tendría que encontrar un plug-in que apoya que el motor de plantillas. El Editor de HTML proporcionado por Eclipse utiliza el valor de los atributos de tipo/idioma para encontrar las clases que proporcionan coloreado de sintaxis, asistencia de contenido, etc. La posibilidad está ahí, pero lista para usar, solo proporciona JavaScript.

Answer 3

Si está listo, escriba un poco de javascript, puede hacerlo. No sé los framwork (s) que está utilizando, por lo que supongo que tiene jQuery, pero puede utilizar la idea sin utilizar jQuery si no lo desea.

En primer lugar, escribir todas las etiquetas que sirven como plantilla en divs con los "tmpl_handlebars" clase CSS en lugar de guiones:

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

Entonces, cuando la página se ha cargado, vuelva a colocar dinámicamente las etiquetas div con el guión etiquetas, y transfiera la identificación y el contenido de las etiquetas div al script. Con jQuery solo tiene que agregar esta pequeña secuencia de comandos en su cabeza 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); 
     ); 
    }); 
}); 

Esto puede funcionar fuera de la caja, pero ya que no soy un especialista del bigote y el manillar, no sé exactamente cuando procesan el DOM para encontrar las plantillas, así que si quieres estar perfectamente seguro, debe hacer este tercer paso: elimine las etiquetas de script que incluyen estas bibliotecas del html estático de su cabecera, y en su lugar, agréguelas dinámicamente con javascript después del procesamiento de los divs, para que su dom esté lista cuando lleguen los scripts .

Antes de la última }); en el código del procesamiento divs, añadir las siguientes líneas para agregar secuencias de comandos:

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

Answer 4

Similar a la respuesta de @ Neparkiraj.

Si está usando Django, puede agregar una etiqueta vacía a (creo) "truco" de Eclipse para simplemente pensar que la línea es simplemente "mala" html. Las líneas subsiguientes serán entonces resaltados con html sintaxis:

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

Como la etiqueta está vacío, <script type="tmpl_handlebars" id="tmpl_places"> será perfectamente generado en el documento final.Tenga en cuenta que, utilizando Django también es probable que significa que el código se encuentra en un bloque de {% verbatim %}, por lo que puede combinar este código para obtener:

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

Todo esto es un poco feo, pero conduce a ambos HTML correcto destacando en Eclipse y renderización correcta en el documento.