Issue #1002 new

new lexer request: jsx

Joe Lencioni
created an issue

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

Comments (14)

  1. Joe Lencioni reporter

    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.

  2. Daniel Cousineau

    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:

    Image 2016-10-27 at 12.07.11 PM.png

    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:

    Image 2016-10-27 at 12.09.35 PM.png

    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)

  3. Daniel Ennis

    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.

  4. Log in to comment