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

Question

我最近升级到最新版本的 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 的最佳方法是什么？

Answer 1

我和你有同样的问题。作为为 <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 论坛。

Answer 2

编辑：现在有一个包，叫做 "Vue Syntax Highlight"

这里有一个方法：

从 Sublime Github 存储库下载 HTML.sublime-语法：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 和 select View > Syntax > Open all with current extension as… > HTML-Vue

Answer 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。

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

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

Syntax Highlighting for HTML inside x-template script tags in Sublime Text 3

html

javascript

syntax-highlighting

sublimetext3

vue.js