From 82326bc0f22da8e735fcdae7ed7a3894ea75e8a5 Mon Sep 17 00:00:00 2001
From: nikvm <mail@nikvm.me>
Date: Thu, 16 Feb 2017 18:51:12 +0100
Subject: [PATCH] Add section on Syntax Highlighting

---
 README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/README.md b/README.md
index e46d8558..bd00d78e 100644
--- a/README.md
+++ b/README.md
@@ -267,6 +267,24 @@ It's **paramount** that you use one of these two functions so that
 the generated styles can be diffed when the client loads and
 duplicate styles are avoided.
 
+## Syntax Highlighting
+
+When working with template literals a common drawback is missing syntax highlighting. The following editors currently have support for highlighting CSS inside `<style jsx>` elements.
+
+ _If you have a solution for an editor not on the list_ __please [open a PR](https://github.com/zeit/styled-jsx/pull/new/master)__ _and let us now._
+
+### Atom
+
+The [`language-babel`](https://github.com/gandm/language-babel) package for the [Atom editor](https://atom.io/) has an option to [extend the grammar for JavaScript tagged template literals](https://github.com/gandm/language-babel#javascript-tagged-template-literal-grammar-extensions).
+
+After [installing the package](https://github.com/gandm/language-babel#installation) add the code below to the appropriate settings entry. In a few moments you should be blessed with proper CSS syntax highlighting. ([source](https://github.com/gandm/language-babel/issues/324))
+
+```
+"(?<=<style jsx>{)|(?<=<style jsx global>{)":source.css.styled
+```
+
+![babel-language settings entry](https://cloud.githubusercontent.com/assets/2313237/22627258/6c97cb68-ebb7-11e6-82e1-60205f8b31e7.png)
+
 ## Credits
 
 - **Pedram Emrouznejad** ([rijs](https://github.com/rijs/fullstack)) suggested attribute selectors over my initial class prefixing idea.