new lexer request: jsx

[Anteru]

(Original issue 1002 created by lencioni on 2014-06-09T22:25:56.703746+00:00)

JSX is a JavaScript XML syntax transform recommended for use with React JS. It is mostly like JavaScript, with the addition of XML-esque code occasionally appearing. It would be great if pygments was able to properly highlight this kind of code.

More info: http://facebook.github.io/react/docs/jsx-in-depth.html

[Anteru]

(Original comment by hudlin on 2015-03-26T21:09:18.679376+00:00)

This would be very nice.

[Anteru]

(Original comment by rscarvalho on 2015-07-01T16:04:38.431844+00:00)

+1 It would be extremely useful to that code with the proper highlighting

[Anteru]

(Original comment by item4 on 2015-07-11T14:18:03.478714+00:00)

👍

[Anteru]

(Original comment by peter_moresi on 2015-09-24T03:19:00.495085+00:00)

There is a spec for language.

https://facebook.github.io/jsx/

[Anteru]

(Original comment by tshatch on 2015-10-17T01:21:57.493317+00:00)

Doesn't look too hard; do people really write this in files named .html? Not a special extension?

[Anteru]

(Original comment by lencioni on 2015-10-17T15:59:56.612512+00:00)

do people really write this in files named .html? Not a special extension?

I think it probably happens because .html files can have <script> tags. However, you should probably start with the most common use-cases and go from there. This probably means files that are entirely JavaScript and JSX—those usually have .js or .jsx extensions.

[Anteru]

(Original comment by iilei on 2016-02-29T08:42:49.361913+00:00)

👍

[Anteru]

(Original comment by benwiley4000 on 2016-03-23T04:44:00.508479+00:00)

Wanted to point out that this python package, pygments-lexer-babylon, works well and without errors for JSX code. just specify the language as "jsx." https://pypi.python.org/pypi/pygments-lexer-babylon/0.10.0

[Anteru]

(Original comment by dcousineau on 2016-11-03T15:53:40.193756+00:00)

This would be a huge boon to users like me. According to Github support they use pygments to syntax-highlight code. Due to no real JSX support valid syntax can result in unreadable diffs, like the following screenshot:

Text in between JSX tags not inside of {} are considered strings however the single quotes appear to be getting picked up as unclosed strings. You can see for comparison Atom's syntax highlighting (using the atom-react package) of the same javascript file is significantly more clear:

Just wanted to cast my vote in favor of this and provide some context and insight as to why, thanks all!

(Please note: I contacted github support about this and they recommended I reach out here so I just wanted to dump the same example I sent them)

[Anteru]

(Original comment by quasipedia on 2017-01-13T14:56:18.865703+00:00)

Is this really a "minor" improvement? It seems like it should be upgraded, given how mainstream is React, these days...

There seems to be a package that works with pygments out there pygments-lexer-babylon that may be of some use perhaps?

[Anteru]

(Original comment by icdennis on 2017-02-09T03:20:55.619754+00:00)

Can we at least just alias jsx to js for now to get basic JS highlighting at least?

It's pretty bad that we have barely any syntax highlighting for the project.

[Anteru]

(Original comment by MnHung on 2017-06-14T03:39:38.479380+00:00)

It's 2017-6

Still need it a lot, btw it seems that basic JS hightlight is now working well, only html tag part is not.

[Anteru]

(Original comment by ozgrozer on 2017-10-08T08:28:45.716063+00:00)

Still no JSX support?

[Anteru]

(Original comment by peterbe on 2018-01-08T10:47:38.512997+00:00)

What about https://github.com/fcurella/jsx-lexer ?

[birkenfeld]

@fcurella want to make another try at a PR, here on github?

[stevepiercy]

I found a couple of bugs in jsx-lexer and submitted PRs fcurella/jsx-lexer#17 and fcurella/jsx-lexer#16 to fix them.

[LoganKells]

I'd love to see this update :)

[stevepiercy]

@LoganKells FYI, you can install jsx-lexer for your documentation. We add it as a requirement in Plone.

• https://github.com/plone/documentation/blob/6.0/requirements.txt#L4

The lexer does a pretty good job. See results:

https://6.docs.plone.org/volto/recipes/images.html

Of course, bringing it into pygments would eliminate an extra requirement, and give it some greater exposure, and hopefully more bug fixes and features. Let's remind @fcurella that a PR would be welcome.

[LoganKells]

@LoganKells FYI, you can install jsx-lexer for your documentation. We add it as a requirement in Plone.

• https://github.com/plone/documentation/blob/6.0/requirements.txt#L4

The lexer does a pretty good job. See results:

https://6.docs.plone.org/volto/recipes/images.html

Of course, bringing it into pygments would eliminate an extra requirement, and give it some greater exposure, and hopefully more bug fixes and features. Let's remind @fcurella that a PR would be welcome.

This package is working well for me. Thanks!