Skip to content

Instantly share code, notes, and snippets.

@mikermcneil
Last active March 24, 2023 17:47
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mikermcneil/cfaf0c63a50fe56fd85d1d8dd9f27f4b to your computer and use it in GitHub Desktop.
Save mikermcneil/cfaf0c63a50fe56fd85d1d8dd9f27f4b to your computer and use it in GitHub Desktop.
Syntax highlight template literals as HTML in Sublime Text 3 for Vue.js components, Vue app instances, or other client-side JavaScript. Particularly useful for the .page.js and .component.js files in your Sails app or other Parasails project. No grunt-ing, gulp-ing, webpack-ing, brunch-ing, or supper required.
%YAML 1.2
---
# parasails.sublime-syntax
#
# Syntax highlight template literals as HTML in Vue components (standalone and inline).
# Automatically enabled for .component.js and .page.js files.
# (Designed for use with client-side JavaScript for your Vue.js, Sails.js,
# or Parasails app-- but could be used anywhere-- even on the server via Node.js.)
#
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
#
# macOS setup instructions:
# (1) On the terminal, type:
# subl ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/parasails.sublime-syntax
#
# (2) Paste in the contents of this file and save it.
#
# (3) Completely quit and restart Sublime.
#
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
# For further info, see:
# • https://gist.github.com/mikermcneil/cfaf0c63a50fe56fd85d1d8dd9f27f4b
#
# Copyright 2018, 2019-present, Mike McNeil <@mikermcneil>
# MIT License
#
# Attribution: This file is originally based on the approach outlined in:
# • https://gist.github.com/subhaze/a754c8d17906f2a25ce2
# • https://forum.sublimetext.com/t/javascript-es6-template-literals-syntax-for-html/18242/2
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
name: JavaScript (Parasails)
file_extensions:
- component.js
- page.js
scope: source.js.parasails
contexts:
main:
- match: ""
push: scope:source.js
with_prototype:
- match: 'template\s*\:\s*`\s*'
push:
- meta_content_scope: text.html.basic.embedded.js
- include: 'scope:text.html.basic'
- match: '`\s*,?\s*$'
pop: true
@kirilcvetkov
Copy link

kirilcvetkov commented Feb 22, 2023

Good job! I followed the instructions and it worked. I only had to manually select syntax highlighting for Javascript (Parasails).
Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment