search

glutanimate / syntax-highlighting

A fork of Tiago Barroso's Syntax Highlighting add-on with support for Anki 2.1
https://ankiweb.net/shared/info/1463041493
Other
108 stars 27 forks source link

jsx syntax #9

Open Spirarel opened 5 years ago

Spirarel commented 5 years ago

Checklist

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

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

Spirarel commented 4 years ago

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 commented 4 years ago

Thanks to @hbergren and @fcurella I have just made this pr (https://github.com/glutanimate/syntax-highlighting/pull/17) that adds JSX formatting to the list of format options.

lukkea commented 4 years ago

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 commented 2 years ago

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