时间戳

首页 > 解决方案 > Sublime Text 3 中 x-template 脚本标签内 HTML 的语法高亮显示

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

问题描述

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

标签： javascripthtmlvue.jssublimetext3syntax-highlighting

解决方案

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

这是一种方法：

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

推荐阅读