Meaningful syntax highlighting for Atom

Example screenshot

Color your syntax not arbitrarily, but with meaningful color layers. Blue covers variables, purple types, orange flow control and operators.

Example JSON nested

Nested JSON highlighting added for free.

Full TypeScript support

For full TypeScript support, install a custom language-typescript-react grammar and add a hack to your init file:

atom.packages.onDidTriggerActivationHook "language-typescript-react:grammar-used", ->
  atom.packages.triggerActivationHook 'language-typescript:grammar-used'

Customize colors

To customize colors, add color variables to your styles file and restart Atom.

The list of all colors is in styles/colors.less. Notice they are named after their looks and not semantics, so you adjust aesthetics, but not the logic.