Sublime Text 3 中 x-template 脚本标签内 HTML 的语法高亮显示答案

【问题标题】：Syntax Highlighting for HTML inside x-template script tags in Sublime Text 3Sublime Text 3 中 x-template 脚本标签内 HTML 的语法高亮显示
【发布时间】：2018-11-01 17:31:12
【问题描述】：

我最近升级到了最新版本的 sublime text（版本 3.1.1 Build 3176）并且丢失了标签内包含的 html 的语法突出显示。

对于上下文，我使用 x-template 类型的脚本在以 .html 扩展名保存的文件中创建 Vue.js 组件。

我的文件看起来像这样：

<!-- comp.html -->
<script type="text/x-template" id="comp-template">
    <div id="comp-template>
        <h2> {{ componentTitle }} </h2>

    </div>
</script>

Sublime Text 的早期版本默认突出显示这些脚本标签中的 html，但现在它似乎不再工作了。让 sublime 再次识别 x-template 脚本标签中的 HTML 的最佳方法是什么？

【问题讨论】：

roland.codes/blog/sublime-text-2-script-tag-templates 你也可以试试<template>
你有没有在 SublimeText 论坛上提出这个问题？ forum.sublimetext.com/c/technical-support

标签： javascript html vue.js sublimetext3 syntax-highlighting

【解决方案1】：

编辑：现在有一个包，称为"Vue Syntax Highlight"

这是一种方法：

从 Sublime Github 存储库下载 HTML.sublime-syntax：https://raw.githubusercontent.com/sublimehq/Packages/f10135941f5aeaa3af5906850f7dc296e51b1172/HTML/HTML.sublime-syntax
将 line 3 从 name: HTML 更改为 name: HTML-Vue
将 line 83 从 - match: '(<)((?i:script))\b' 更改为 - match: '(<)((?i:script))\b(?![^>]*/>)(?![^>]*(?i:type.?=.?text/((?!javascript).*)))'
将文件重命名为HTML-Vue.sublime-syntax
将文件保存到用户本地设置（对于 Windows，它是 %AppData%\Sublime Text 3\Packages\User\HTML-Vue.sublime-syntax）
重启 SublimeText 并选择View > Syntax > Open all with current extension as… > HTML-Vue

【讨论】：

我试了几次，但重启 Sublime 后没有出现“HTML-Vue”语法选项。
搞定了。我不得不使用扩展名.sublime-syntax 而不是.sublime-settings
哦，是的，我的错。让我修复我的帖子！谢谢
投票、书签、截图、c/p 链接……这是一个强大的设置！谢谢！一个小的更改我只需将文件命名为“HTML-Script-Text.sublime-syntax”，因为它适用于不同的模板。另请注意，截至我的评论日期，行号是 106 而不是 114

【解决方案2】：

我和你有同样的问题。作为为<script type="text/x-template">...</script>启用语法高亮的临时解决方法：

安装旧版本，例如 Build 3143（Windows：https://download.sublimetext.com/Sublime Text Build 3143 x64 Setup.exe）
备份C:\Program Files\Sublime Text 3\Packages\HTML.sublime-package
更新到最新版本
恢复备份

仅供参考，我向 Sublime 论坛报告了您的问题。

【讨论】：

您不应该更改 Sublime Text 应用程序文件夹中的文件。我发布了一种更优雅的方法。

【解决方案3】：

这是一种不需要新语法模式且编辑更简单的方法：

从与 Sublime Text 3 捆绑的 Packages 目录中复制 HTML.sublime-package 文件。
它实际上是一个zip文件，所以将内容解压缩到用户包区域..../User/Packages/HTML。
在 HTML 目录和 script-type-decider 块更改中编辑 HTML.sublime-syntax 文件：

    - match: (?i)(?=text/html(?!{{unquoted_attribute_value}})|'text/html'|"text/html")

到

    - match: (?i)(?=text/html(?!{{unquoted_attribute_value}})|'text/html'|"text/html"|"text/x-template")

（或替换您正在使用的任何模板类型。）

然后重启 Sublime Text。

注意，这种方法的一个缺点是当 Sublime Text 更新时，HTML 包将不再是最新的。因此，您可能需要定期再次执行这些步骤。

【讨论】：