From e1d114fdc399616ad32b20736053a4244cef3c9d Mon Sep 17 00:00:00 2001
From: Shidhin <shidhincr@gmail.com>
Date: Mon, 13 Jun 2016 19:34:46 +0400
Subject: [PATCH] Enable syntax highlighting in the code block

---
 README.md | 92 +++++++++++++++++++++++++++++--------------------------
 1 file changed, 48 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index 8eaae04..2a4f49e 100644
--- a/README.md
+++ b/README.md
@@ -18,68 +18,72 @@ Install from npm:
 
 Configure in `webpack.config.js`:
 
-    module.exports = {
-      ...
-      module: {
-        loaders: [
-          {
-            test: /\.react.css$/,
-            loader: 'babel-loader!react-css-components/webpack',
-          }
-        ]
+```js
+module.exports = {
+  ...
+  module: {
+    loaders: [
+      {
+        test: /\.react.css$/,
+        loader: 'babel-loader!react-css-components/webpack',
       }
-      ...
-    }
-
+    ]
+  }
+  ...
+}
+```
 Now you can author React components in `Styles.react.css`:
+```css
+Label {
+  color: red;
+}
 
-    Label {
-      color: red;
-    }
-
-    Label:hover {
-      color: white;
-    }
+Label:hover {
+  color: white;
+}
+```
 
 And consume them like regular React components:
+```js
+import {Label} from './styles.react.css'
 
-    import {Label} from './styles.react.css'
-
-    <Label /> // => <div className="<autogenerated classname>">...</div>
-
+<Label /> // => <div className="<autogenerated classname>">...</div>
+```
 ## Variants
 
 You can define additional styling variants for your components:
+```css
+Label {
+  color: red;
+}
 
-    Label {
-      color: red;
-    }
-
-    Label:emphasis {
-      font-weight: bold;
-    }
+Label:emphasis {
+  font-weight: bold;
+}
+```
 
 They are compiled as CSS classes which then can be controlled from JS via
 `variant` prop:
-
-    <Label variant={{emphasis: true}} /> // sets both classes with `color` and `font-weight`
-
+```js
+<Label variant={{emphasis: true}} /> // sets both classes with `color` and `font-weight`
+```
 ## Prop variants
 
 You can define variants which are based on some JavaScript expression against
 props:
-
-    Label {
-      color: red;
-    }
-
-    Label:prop(mode == "emphasis") {
-      font-weight: bold;
-    }
-
+```css
+Label {
+  color: red;
+}
+
+Label:prop(mode == "emphasis") {
+  font-weight: bold;
+}
+```
 They are compiled as CSS classes which then can be controlled from JS:
-
-    <Label mode="emphasis" /> // sets both classes with `color` and `font-weight`
+```js
+<Label mode="emphasis" /> // sets both classes with `color` and `font-weight`
+```
 
 ## TODO