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

标签 javascript html vue.js sublimetext3 syntax-highlighting

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

最佳答案

编辑:现在有一个包,叫做 "Vue Syntax Highlight"


这里有一个方法:

  1. 从 Sublime Github 存储库下载 HTML.sublime-syntax:https://raw.githubusercontent.com/sublimehq/Packages/f10135941f5aeaa3af5906850f7dc296e51b1172/HTML/HTML.sublime-syntax
  2. 更改 line 3来自 name: HTMLname: HTML-Vue
  3. 更改 line 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

关于javascript - Sublime Text 3 中 x-template 脚本标签内 HTML 的语法高亮显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50476287/

相关文章:

javascript - 以多种形式获取所有选定复选框的值

javascript - 如果在对象中定义则覆盖函数,否则默认功能

html - 具有边距对齐问题的 Flexbox

javascript - Webpack dev img 文件夹始终指向 ./dist

javascript - 在 Vue js 应用程序中在哪里初始化 firebase?

javascript - 缩放内容以始终适合窗口

javascript 汉堡菜单并不总是触发 javascript

html - HTML5如何支持RDFa?

amazon-web-services - 如何在 AWS 上运行 Vue JS 应用程序?

javascript - Azure 应用程序见解 Node js 模块无法正常工作 - Fetch API 无法加载错误