Skip to content

Difference in highlighting some TypeScript React files (Sublime vs. Syntect) #97

@emidoots

Description

@emidoots

Syntect fails to properly syntax highlight some TypeScript React (tsx) files in contrast to Sublime Text 3 which highlights them fine.

To reproduce this:

  1. You'll need to first download Microsoft's official TypeScriptReact.tmLanguage file and save it somewhere.
  2. Convert that .tmLanguage file to a .sublime-syntax file, using Sublime Text 3's builtin Plugin Development: Convert Syntax to .sublime-syntax command (important: only shows up when viewing .tmLanguage files)
  3. Save the new .sublime-syntax file into e.g. testdata/Packages/TypeScript/TypeScriptReact.sublime-syntax
  4. 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,

  1. Save this BasePicker.tsx test file anywhere.
  2. 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:

image

In contrast, the HTML rendered by cargo run --example synhtml ./BasePicker.tsx > out.html ends up looking like this:

image

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:

image

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:

image

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 :) )

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions