-
Notifications
You must be signed in to change notification settings - Fork 154
Description
Syntect fails to properly syntax highlight some TypeScript React (tsx) files in contrast to Sublime Text 3 which highlights them fine.
To reproduce this:
- You'll need to first download Microsoft's official TypeScriptReact.tmLanguage file and save it somewhere.
- Convert that
.tmLanguage
file to a.sublime-syntax
file, using Sublime Text 3's builtinPlugin Development: Convert Syntax to .sublime-syntax
command (important: only shows up when viewing.tmLanguage
files) - Save the new
.sublime-syntax
file into e.g.testdata/Packages/TypeScript/TypeScriptReact.sublime-syntax
- Run
make assets
.
Alternatively, my fork's branch here has the above steps done so you don't have to perform them. The .sublime-syntax
file is also in the root of the repo.
Once you've done the above or cloned my fork,
- Save this BasePicker.tsx test file anywhere.
- Save TypeScriptReact.sublime-syntax into e.g.
~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/
on Mac (and uninstall the TypeScript Sublime plugin, to prevent any concern over the tmLanguage -> sublime-syntax conversion potentially being the issue).
When the file is viewed in Sublime, it looks like this:
In contrast, the HTML rendered by cargo run --example synhtml ./BasePicker.tsx > out.html
ends up looking like this:
Of course, the above two look different due to the theme in use, but notice that even just in the syntect result alone there are two different colors in use for the attributes:
I found that changing this line of code to remove the addition operator:
suggestedDisplayValue={ suggestedDisplayValue }
- aria-activedescendant={ 'sug-' + this.suggestionStore.currentIndex }
+ aria-activedescendant={ this.suggestionStore.currentIndex }
aria-owns='suggestion-list'
Fixes the highlighting in Syntect:
If it wasn't for Sublime rendering this file with the same sublime-syntax, I would assume the syntax file was broken somehow -- but given the difference between Sublime and Syntect's rendering, I assume this must be a bug in Syntect (but I do not understand Syntect well enough to even begin tracking it down :) )