[Feature request] Syntax highlighting in <script type="text/babel"> for HTML support

[Kristinita]

Summary

It would be nice, if in JavaScript (Babel) syntax will be added support syntax highlighting for Babel in tag <script></script> for HTML.

Expected behavior

In separate file.

Actual behavior

In HTML.

Steps to reproduce

In open HTML file I have script:

<script type="text/babel">
  let arr = ["hello", 2]; // let

  let [str, times] = arr; //

  alert( str.repeat(times) );
</script>

Script not highlight for me. I get scope for each place of this script: source.js meta.jsx.js I get each time.

Environment

Sublime Text:
Build 3126
Syntax:
JavaScript (Babel) into Babel plugin
Color scheme:
Monokai Phoenix into Babel plugin

Thanks.

[nwoltman]

You might have better luck opening an issue in the sublimehq/Packages repo since it should be the Sublime HTML syntax that includes this feature.

[zertosh]

Can't do anything about this. What the HTML grammar decides to scope as embedded javascript is outside babel-sublime.

[alopatin]

I was having this issue too, this is how I fixed it (on MacOS):

1. Copy Sublime Text.app/Contents/MacOS/Packages/HTML.sublime-package to somewhere.
2. Rename the file to HTML.sublime-package.zip, then unzip it.
3. Copy the contained HTML.sublime-syntax file to ~/Library/Application Support/Sublime Text 3/Packages/User/.
4. Grep for javascript, change it to javascript|babel.
5. Close and reopen your original HTML file to see the updated syntax highlighting!

For convenience, here is a gist with the modified HTML.sublime-syntax file that you can just copy to ~/Library/Application Support/Sublime Text 3/Packages/User/.

[stanbers]

@alopatin , when I copy the HTML.sublime-syntax file to that path you mentioned above, my sublime still not work ,did I miss anything ? do you have any suggestions ?

[asdutoit]

@stanbers , I assume you came right. But just for the sake of anybody else who may be experiencing the same issue, rather save the file, HTML.sublime-syntax, in ~/Library/Application Support/Sublime Text 3/Packages/HTML/ . Ensure Sublime Text 3 is closed before you start.
Then re-open Sublime and test.

[animex]

@alopatin Thanks. Did the same with Windows! The only difference is the line is different where you need to change in HTMl.sublime-syntax:

javascript_mime_type: |-
  (?ix)(?:
    # https://mimesniff.spec.whatwg.org/#javascript-mime-type
    (?:application|text)/(?:x-)?(?:java|ecma)script
    | text/javascript1\.[0-5]
    | text/babel
    | text/jscript
    | text/livescript
)

[chavab1]

I finally got it to work half-way using @alopatin 's help. However, it still doesn't work entirely. Some of the declarations are all yellow after entering some JSX code. Do I have to set a setting somewhere??
Any idea how I can get it to work??

Thanx

[dtg5]

I have the same problem as @chavab1.
For me it looks like this:

EDIT:
Fixed by adding this code to the main: block in HTML.sublime-syntax:

- match: '(<)((?i:script))\b(?![^>]*/>)(?![^>]*(?i:type.?=.?text/((?!babel).*)))'
  captures:
    0: meta.tag.script.begin.html
    1: punctuation.definition.tag.begin.html
    2: entity.name.tag.script.html
  push:
    - match: (?i)(</)(script)(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: punctuation.definition.tag.end.html
      pop: true
    - include: tag-stuff
    - match: '>'
      push: "Packages/Babel/JavaScript (Babel).sublime-syntax"
      with_prototype:
         - match: (?i)(?=</script)
           pop: true

Doesn't seem very elegant, but it got the job done I guess. My HTML looks like this now:

[chavab1]

@dtg5 I actually figured out that it was the ending / that was causing the code to look that way. After I figured that out I did research and found that other people had started complaining about it as well and there is even a thread dedicated to it. It seems like support for JSX is still off.
They suggest to use this syntax. It does work after installing this package.

However, after enabling this new syntax I found that the PHP syntax doesn't work anymore. I researched that and the developers just became aware of it. They suggest to disable the default PHP syntax and use their own PHP syntax. They said it's just a temporary fix and they are currently working on a permanent solution.

After going through all that and then seeing your solution I'm kind of tempted to just use your solution. It's definitely much easier. Here's how my HTML looks now.

[woojoo666]

still isn't working for me, even with the solution from @dtg5. I know the syntax file is being loaded because it's parsing the 'text/babel' tag, but it's parsing it as plain javascript. Can anybody provide the sublime-syntax file that is working for them (Windows, Sublime Text 3)? Thanks

[chavab1]

It looks like you're still having the problem with the '/' sign.
As I stated in my previous response, I got it to work by using this syntax. However, it conflicted with my PHP syntax so I had to use a different PHP syntax as well.

Another solution was making revisions to the main HTML syntax as @dtg5 discovered.

I've attached the file that I'm using with @dtg5's fix and it's working. I'm using the babel package as well.

HTML.zip

[woojoo666]

@chavab1 oh nice, that HTML sublime syntax file works for me, thanks! And I'll have to check out the Naomi syntax package as well, seems like a good alternative instead of manually overriding my HTML syntax file