带有 <script type="tmpl_handlebars"> 的 HTML 文件的 Eclipse 语法突出显示答案

【问题标题】：Eclipse Syntax Highlighting for HTML Files with <script type="tmpl_handlebars">带有 <script type="tmpl_handlebars"> 的 HTML 文件的 Eclipse 语法突出显示
【发布时间】：2012-04-21 12:19:37
【问题描述】：

目前我正在使用 Handlebars（JS 模板引擎）开发一个项目，并且我正在使用 eclipse 进行开发。问题是，eclipse 没有为我的 Handlebars-Templates 提供语法高亮显示。我的模板包含在标签中。按预期在作品中突出显示语法。

截图：

Eclipse 是否也可以突出显示此代码（最好使用 HTML 语法着色）？

【问题讨论】：

标签： javascript html eclipse syntax-highlighting handlebars.js

【解决方案1】：

如果你使用PHP，你可以通过添加空的php标签来欺骗Eclipse：

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

【讨论】：

如果只是临时更改脚本标签的名称也可以。

【解决方案2】：

您必须找到支持该模板引擎的插件。 Eclipse 提供的 HTML 编辑器使用类型/语言属性的值来查找提供语法着色、内容辅助等的类。这种可能性是存在的，但开箱即用，它只提供 JavaScript。

【讨论】：

【解决方案3】：

如果你准备好写一点 javascript，你可以这样做。我不知道你正在使用的框架，所以我假设你有 jQuery，但如果你不想使用 jQuery，你可以使用这个想法。

首先，使用“tmpl_handlebars”css 类而不是脚本在 div 中编写所有用作模板的标签：

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

然后，当您的页面加载完毕后，将 div 标签动态替换为 script 标签，并将 div 标签的 id 和内容传递给脚本。使用 jQuery，您只需在 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 以找到模板，所以如果你想绝对安全，你应该做这第三步：从你头的静态 html 中删除包含这些库的脚本标签，而是在处理完 div 后使用 javascript 动态添加它们，这样当脚本到达时你的 dom 就准备好了。

在 div 处理代码中的最后一个 }); 之前，添加以下行以添加您的脚本：

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

【讨论】：

其他编辑器可能没有同样的问题，所以扭曲代码似乎不公平。我正在寻找一个 Eclipse 特定的解决方案。
@kinjal 我了解，但如果您想知道，我认为是库有问题，而不是 Eclipse。当他们决定将模板放在“脚本”标签中时，他们是怎么想的……？从 html 的角度来看，这非常令人困惑，这甚至不是有效的 html。您希望编辑器如何正确着色？

【解决方案4】：

类似于@Neparkiraj 的回答。

如果你使用Django，你可以添加一个空标签到（我相信）“trick” 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 %}

所有这一切有点难看，但会导致 Eclipse 中正确的 HTML 突出显示和文档中的正确呈现。

【讨论】：