Sublime Forum

Javascript ES6 template literals syntax for HTML

#1

I am trying to have syntax highlighting for when I have some HTML wrapped by the backticks.
Currently, looks like this:

Screen Shot 2016-03-03 at 12.32.38.png2240×786 49.1 KB

A bit of context: this is an angular 1.5 component, with inline templating. I have the babel plugin and tried many different themes without success. ST3 3107.
Help and thanks in advance.

1 Like
Typescript template literals syntax for SQL
Render html string
#2

Here is a quick example of getting HTML highlighting working within template strings.

In ST just do: Tools > Developer > New Syntax

and paste the following from https://gist.github.com/subhaze/a754c8d17906f2a25ce2

That should get you started!

0 Likes
#3

Saved it has something.yaml . What am I missing here in order to activate it ?

0 Likes
#4

save it as .sublime-syntax

1 Like
#5

Worked! Thanks. Gonna integrate with Babel Sublime syntax now.

0 Likes
#6

Hey @subhaze the tip was great and it works but now the linter stopped working.

Is it possible to tell the linter that the new syntax is also JavaScript?

0 Likes
#7

I’m not sure, I would think so but I don’t use linters within Sublime.

0 Likes
#8

I tried this and it wouldn’t work.

Here is how I did it

I have 2 questions.

Where to save this file to?

How to actually activate this?

0 Likes
#9

If you’re using SublimeLinter for linting, just add this syntax to syntax_map field in your SublimeLinter settings like this:

{
  "user": {
    "syntax_map": {
      "javascript ng": "javascript"
    }
  }
}
0 Likes
#10

Thanks for the answer but it just does not seem to have an effect. Is there anything I can do to debug this?

0 Likes
#11

Hmm, check your .sublime-syntax file for name field, and then put lowercased value of this field to syntax_map definitions in your SublimeLinter config. So, in my case:

# JavaScript (Tagged Templates.sublime-syntax)
name: JavaScript (Tagged Templates)

# SublimeLinter.sublime-settings
{
  "user": {
    # other settings...
    "syntax_map": {
      # other settings...
      "javascript (tagged templates)": "javascript"
    }
  }
}
0 Likes