Kousha Kousha - 4 months ago 23
React JSX Question

GitHub Code highlighting for React file with js extension

If you create a React file but save it with

.js
extension, then GitHub code highlighting breaks when it reaches a single quote in text. Saving the same file in
.jsx
works fine.

See example on this repo. Both file
correct-highlighting.jsx
and
incorrect-highlighting.js
have the same content. As you can, the
.js
has wrong syntax highlighting.

Is there anyway to fix this, while still using
.jx
extension?

Answer

A somewhat cumbersome solution based on the Linguist readme is to add a vim or emacs modeline to the file. Appears you can add it within a JS comment to keep your source valid while maintaining correct syntax formatting on GH.

https://gist.github.com/ryanjduffy/50ba7c8d8adcbe1615cb016bf799cc69

// vim: syntax=JSX
import React from 'react';

export default class MyClass extends React.Component {
  render() {
    return (
      <a href="google.com">Let's head to google.com</a>
    );
  }
}
Comments