2

I use angularJS, and have various directives that follow a naming convention like "app-data-grid", "app-slider", "app-carousel" or "app-compile-some-template", etc. Essentially, it is the normal angular directive naming convention of [app name]-[dash delimited words]. Sublime Text HTML language syntax highlighting doesn't properly match these with its regex. It will highlight "app" in "<app-carousel" or "<app-some-long-directive-name" but will not highlight the entire tag name.

Here is the predefined regex in the HTML.tmLanguage file: 

(&lt;)([a-zA-Z0-9:]++)(?=[^&gt;]*&gt;&lt;/\2&gt;)

I tried adding a dash after the colon of the second matching group:

(&lt;)([a-zA-Z0-9:-]++)(?=[^&gt;]*&gt;&lt;/\2&gt;)

The second regex worked in a regex tester, but did not work in Sublime Text.

Also, I have downloaded an AngularJS plugin that gave me an AngularJS-HTML language definition... which also has the same problem.

How can I fix the regex so that it matches the full tag name for highlighting?

nhahtdh
  • 55,989
  • 15
  • 126
  • 162
Colin Hartwig
  • 71
  • 8
  • i dont know how this regex should match what you posted, in what tester did you try this and what did you use as your sample text? – Vajura Oct 17 '14 at 05:32
  • I used [link](http://www.regexr.com/ "RegExr") to test the following: `([a-zA-Z0-9:-]+)` It matches as I would expect it would match in RegExr, although it does not match in Sublime. Sublime's original RegEx doesn't work in RegExr (the double plus threw it off), maybe due to different engines being used? I used "blah-blah-blah" as my sample text, just to test that all three words and their hyphens were matched. – Colin Hartwig Oct 20 '14 at 18:24
  • `++` does actually have a meaning in regex: it means no backtracking. More specifically, in this case it means once it's found a match for `(<)`, only the best match for `[a-zA-Z0-9:-]+` will do; if this can't be extended to a match for the whole regex, it will try to find another match for `(<)`. For example, `<app-foo id="foo"><app-foo>` will fail because `[a-zA-Z0-9:-]++` can't match `app-foo`, because it can match `app-foo id="foo"`. (You can also do `?+` and `{m,n}+`.) – David Knipe Nov 09 '14 at 15:48

3 Answers3

4

Go to Preferences >> Settings-User.

On this JSON add to ignored_packages array an iten named "HTML", like this:

"ignored_packages":
    [
        "Vintage",
        "HTML"
    ]

Save the file.

Now go to Preferences >> Browse Packeges, make a copy of HTML directory and rename it as "HTMLAngularJS".

Enter in to HTMLAngularJS directory and rename the file "HTML.tmLanguage" to "HTMLAngularJS.tmLanguage".

Edit "HTMLAngularJS.tmLanguage" file, find this both Regex:

<string>(&lt;)([a-zA-Z0-9:]++)(?=[^&gt;]*&gt;&lt;/\2&gt;)</string> Line 45

and

<string>(&lt;/?)([a-zA-Z0-9:]+)</string> Line 514

Just add the slash and - after double points, should be like this:

<string>(&lt;)([a-zA-Z0-9:\-]++)(?=[^&gt;]*&gt;&lt;/\2&gt;)</string>

and

<string>(&lt;/?)([a-zA-Z0-9:\-]+)</string>

Save the file and be happy!

Regards!

Exdcarca
  • 424
  • 5
  • 7
  • When I save the preferences file it says that package doesn't exist. When I browse packages, there isn't one called HTML. I wonder if its just different in ST3. – eddiemoya Apr 27 '16 at 14:09
1

Use the HTML Extended sublime plugin

Joey Cheng
  • 128
  • 1
  • 9
0

Did you add HTML to your ignore_package array in your user settings? With that entry, you are overriding the default HTML syntax package, therefore forcing sublime to user your HTML.tmLanguage.

I found this answer from BoundinCode where he explains it, and this actually did the trick for me.

Community
  • 1
  • 1
byCedric
  • 21
  • 1
  • 2
  • 11