Syntax highlighting for jsx in .js files?

Glitch Feedback
1

Currently, if you use jsx in a React component in a .js file, like in https://glitch.com/edit/#!/wistia-next-app?path=components/wistia_embed.js:8:6, the syntax highlighting will break.

Why not just use the .jsx extension instead, since that’ll highlight with no issues? Excellent question!

Projects that use Next.js cannot use the .jsx extension. I don’t understand the reasons very well, but here’s the issue: https://github.com/zeit/next.js/issues/200.

Since it sounds like it’s very unlikely that this will get resolved from the Next.js side of things, I’m wondering if Glitch could add support for highlighting .js files that contain jsx. I use this package in Atom, which handles that very nicely: https://github.com/subtleGradient/language-javascript-jsx.

1 Like
2

Hi David!

We might consider using the text/jsx highlight as the default for JavaScript files, but we aren’t sure yet. In the meantime, you can use one of these bookmarklets (copy’n’paste the following scripts in two separate bookmark URLs and put them in your bookmark bar) to change the mode of the current file to jsx manually :slight_smile:

  1. Temporarily change the highlight of the current file to jsx (you would need to click on the bookmark every time you switch files):
javascript:(function() {
  application.editor().setOption("mode", "text/jsx");
  CodeMirror.autoLoadMode(application.editor(), "jsx");
})()
  1. Change the highlight of all JavaScript files to jsx for the current editing session (you only need to click on the bookmark when you go the editor, the highlight remains until you reload or close the page):
javascript:(function() {
  CodeMirror.findModeByName("js").mime = "text/jsx";
  CodeMirror.findModeByName("js").mode = "jsx";
  application.editor().setOption("mode", "text/jsx");
  CodeMirror.autoLoadMode(application.editor(), "jsx");
})()
1 Like
3

Goodness gracious, what a neat little solution. Thanks @etamponi!

1 Like