Update to 6.x

.babelrc

@@ -1,14 +1,7 @@
 {
 	"presets": [
-		"es2015",
+		"env",
 		"react",
 		"stage-0"
-	],
-	"env": {
-		"development": {
-			"presets": [
-				"react-hmre"
-			]
-		}
-	}
+	]
 }

.gitignore

@@ -1,15 +1,12 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-node_modules
-
-# testing
-coverage
-
-# production
-build
-
-# misc
 .DS_Store
 .env
 npm-debug.log
+node_modules/
+Thumbs.db
+.idea/
+.vscode/
+*.sublime-project
+*.sublime-workspace
+*.log
+.eslintcache
+styleguide/

lib/components/Button/Readme.md

@@ -1,15 +1,37 @@
 Basic button:
 
-    <Button>Push Me</Button>
+```jsx
+<Button>Push Me</Button>
+```
 
 Big pink button:
 
-    <Button size="large" color="deeppink">Lick Me</Button>
+```jsx
+<Button size="large" color="deeppink">Lick Me</Button>
+```
 
 And you *can* **use** `any` [Markdown](http://daringfireball.net/projects/markdown/) here.
 
-If you define a fenced code block with a language flag it will be rendered as a regular Markdown code snippet:
+Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as a interactive playgrounds:
+
+```jsx
+<Button>Push Me</Button>
+```
+
+You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor````):
 
-```javascript
+```jsx noeditor
+<Button>Push Me</Button>
+```
+
+To render an example as highlighted source code add a `static` modifier: (```` ```js static````):
+
+```js static
 import React from 'react';
 ```
+
+Fenced blocks with other languages are rendered as highlighted code:
+
+```html
+<h1>Hello world</h1>
+```

lib/components/Modal/Readme.md

@@ -1,14 +1,18 @@
 Each example has its own state that you can access at the `state` variable and change with the `setState` function. Default state is `{}`.
 
-    <div>
-      <button onClick={() => setState({isOpen: true})}>Open</button>
-      <Modal isOpen={state.isOpen}>
-        <h1>Hallo!</h1>
-        <button onClick={() => setState({isOpen: false})}>Close</button>
-      </Modal>
-    </div>
+```jsx
+<div>
+  <button onClick={() => setState({isOpen: true})}>Open</button>
+  <Modal isOpen={state.isOpen}>
+    <h1>Hallo!</h1>
+    <button onClick={() => setState({isOpen: false})}>Close</button>
+  </Modal>
+</div>
+```
 
 If you want to set the default state you can do something like that:
 
-    initialState = {count: 1};
-    <button onClick={() => setState({count: state.count+1})}>{state.count}</button>
+```jsx
+initialState = {count: 1};
+<button onClick={() => setState({count: state.count+1})}>{state.count}</button>
+```

lib/components/Placeholder/Readme.md

@@ -1 +1,3 @@
-    <Placeholder type="beard"/>
+```jsx
+<Placeholder type="beard"/>
+```

lib/components/RandomButton/Readme.md

@@ -1,4 +1,6 @@
 You can `require` external files in your examples:
 
-    const names = require('dog-names').all;
-    <RandomButton variants={names}/>
+```jsx
+const names = require('dog-names').all;
+<RandomButton variants={names}/>
+```