jsx syntax

[Spirarel]

Checklist

Please replace the space inside the brackets with an x if the following items apply:

• I've verified that I use the latest version of the add-on by redownloading it from AnkiWeb
• I've verified that I use the latest version of Anki by checking at https://apps.ankiweb.net#download
• I've checked if anyone else suggested this feature before by looking through the issue reports.

Problem case

The current app support many flavors/extension of vanilla JS. It doesn't feature jsx which is used on many React.js projects.

Solution

Add jsx highlighting

More information

If there's a standard way to add support, I'm happy to do it, if pointed in the right direction.

[0xCLARITY]

Looks like you need a pygments lexer that understands JSX, like this:
https://github.com/fcurella/jsx-lexer/blob/master/jsx/lexer.py

My first inclination would be to copy and paste that into the /lexers folder here and see if it just works as is:
https://github.com/glutanimate/syntax-highlighting/tree/master/src/syntax_highlighting/libs/pygments/lexers

That JSX lexer does have its own MIT license, and I'm not sure where the license for that would go in this project.

[Spirarel]

Right, well it looks like most of the built-in lexers' licenses have been dealt with by pyments itself. This would probably require a separate dependency_licenses directory, we could stash that in.

Here are some of the ways forward

Upstream

Pyment is maintained on bitbucket. There's an open PR here addressing a feature request for JSX back in 2014 here. The repo is being maintained, but this PR has been neglected for some reason. I made an account and posted to see what's up.

Use jsx-lexer and wrap it in pyment

The lexer
This seems pretty well documented here, http://pygments.org/docs/lexerdevelopment/

---

The former requires updating a dependency which is attractive, but given that the PR has been ignored I'm not sure that's the safest option.

In either event I'm concerned about making a PR when the issue went unaddressed for two weeks. @glutanimate are you still maintaining this repo?
Edit: Turns out I made a trivial PR on this repo back in November 2018 and it went nowhere. It might be time to ping glutanimate on reddit...

[glutanimate]

@Spirarel

Sorry for taking a bit to respond (though 15 days really isn't that much in the great scheme of things, especially considering the number of repos I need to maintain).

As you guys have talked about, issues like these should ideally be resolved on pygments' end, as it's an upstream problem rather than something specific to the add-on. However, since JSX is fairly popular, I wouldn't be opposed to merging a PR that introduces a custom lexer.

As for the license: You could add that as "LICENSE_JSX_LEXER" under src/libs/LICENSES for instance. I'll take care of adjusting the README and other docs.

[metamas]

Any progress made on this? I'd love to create a bunch of React focused flashcards that have proper syntax highlighting. I already use this addon for Rust and Javascript flashcards.

[glutanimate]

Not that I know of, but as mentioned above I'd be happy to accept a PR.

[Spirarel]

Excellent timing! I was going to update this today! Upstream, pyments has approved a PR for the React lexer today. I'm afk right now, but I'll check if they've made a release when I get home. Should, be less work on our end to just update the dependencies and any wiring. Edit: The PR has been approved by a reviewer, but it doesn't look like they have merged anything since July, so it could be a while.

[lukkea]

Thanks to @hbergren and @fcurella I have just made this pr (#17) that adds JSX formatting to the list of format options.

[lukkea]

I removed pull request #17 because I hadn't created a dedicated branch for it, as glutanimate requested.

I have made another pull request (#19 ) with things done correctly (I hope). It's here.

[dnecklesportfolio]

Any progress made on this? I'd love to create a bunch of React focused flashcards that have proper syntax highlighting. I already use this addon for Rust and Javascript flashcards.

This question is for you or anyone: what hacky alternatives workarounds have people found creating flash cards using anki to achieve this. I too encountered some difficulty working with the anki and the plugin for the js in dark mode and don't want to get bogged down by anki. I was going to flip through code screenshots using ray.so