Vscode: Syntax highlighting doesn't work with "text/babel" script tags

[arntj]

• VSCode Version: 1.6.0-insider
• OS Version: Windows 10 version 1511 (OS Build 10586.545)

Steps to Reproduce:

1. Create a <script type="text/babel"> tag in a .html file.
2. Observe that syntax highlighting doesn't work inside the tag as long as script type is set to text/babel. If it is changed to text/javascript then syntax highlighting works.

It is absolutely required to be able to use text/babel tags in some instances, e.g. when following the official ReactJS tutorial.

[alexdima]

Our system doesn't know the text/babel mimetype. Not sure if HTML should bake that knowledge in. fyi @aeschli when moving html out to an extension

[chaunax]

FYI, I was able to hack this ability in by modifying the resourcesappextensionsjavascriptpackage.json file. Look for the mimetypes array, and add in text/babel. I used it to add in "text/msx;harmony=true" for mithril msx syntax (FYI to @insin).

[chaunax]

This hack breaks with the new 1.6.1 release (downgrading to 1.5.2 still works). I believe it's now controlled by a combination of the two regexes in extensions/javascript/syntaxes/JavaScript.tmLanguage.json and extensions/html/syntaxes/html.json.

[alexdima]

Exactly, coloring of HTML is now done via TextMate. Here is for exampel how the HTML TM language embeds JavaScript. it also references css, python, etc.

https://github.com/Microsoft/vscode/blob/master/extensions/html/syntaxes/html.json#L180

[pdonald]

I changed this line in C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\html\syntaxes\html.json

"begin": "(?:^\\s+)?(<)((?i:script))\\b(?![^>]*/>)(?![^>]*(?i:type.?=.?text/((?!javascript).*)))",

to

"begin": "(?:^\\s+)?(<)((?i:script))\\b(?![^>]*/>)(?![^>]*(?i:type.?=.?text/((?!javascript|babel).*)))",

to get text/babel to work.

[aeschli]

We use https://github.com/textmate/html.tmbundle as grammar for HTML.
Please file a pull request there. Ping me if the update is in there. I'm happy to update our grammar then.

[phocks]

For reference on macOS you need to right-click > Show package contents in your Applications folder then browse to /Contents/Resources/app/extensions/html/syntaxes/html.json

Then find where it says (javascript|ecmascript) in the file and change it to (javascript|ecmascript|babel) in both places in that line of code.