From 88724cd7f21c97f9f05ca129911cc2828eb8dfa6 Mon Sep 17 00:00:00 2001
From: Artem Sapegin <artem@sapegin.ru>
Date: Fri, 14 Jul 2017 22:13:51 +0200
Subject: [PATCH] Docs: Update examples syntax

---
 .../src/components/CounterButton/Readme.md    |  4 +++-
 examples/basic/src/components/Modal/Readme.md | 22 +++++++++++--------
 .../src/components/Placeholder/Readme.md      |  4 +++-
 .../src/components/RandomButton/Readme.md     |  6 +++--
 .../src/components/WrappedButton/Readme.md    |  4 +++-
 examples/cra/src/components/Placeholder.md    |  4 +++-
 examples/cra/src/components/RandomButton.md   |  6 +++--
 .../customised/src/components/Modal/Readme.md | 22 +++++++++++--------
 .../src/components/Placeholder/Readme.md      |  4 +++-
 .../src/components/RandomButton/Readme.md     |  6 +++--
 .../src/components/CustomEndpoint/Readme.md   |  2 +-
 .../src/components/CounterButton/Readme.md    |  4 +++-
 .../preact/src/components/Modal/Readme.md     | 22 +++++++++++--------
 .../src/components/Placeholder/Readme.md      |  4 +++-
 .../src/components/RandomButton/Readme.md     |  6 +++--
 .../src/components/WrappedButton/Readme.md    |  4 +++-
 .../sections/src/components/Label/Readme.md   |  4 +++-
 .../src/components/Placeholder/Example.md     |  4 +++-
 .../src/components/Placeholder/_Readme.md     |  4 +++-
 .../webpack/src/components/Placeholder.md     |  4 +++-
 .../webpack/src/components/RandomButton.md    |  6 +++--
 21 files changed, 96 insertions(+), 50 deletions(-)

diff --git a/examples/basic/src/components/CounterButton/Readme.md b/examples/basic/src/components/CounterButton/Readme.md
index 4a4201833..068c370a8 100644
--- a/examples/basic/src/components/CounterButton/Readme.md
+++ b/examples/basic/src/components/CounterButton/Readme.md
@@ -1 +1,3 @@
-    <CounterButton/>
+```js
+<CounterButton/>
+```
diff --git a/examples/basic/src/components/Modal/Readme.md b/examples/basic/src/components/Modal/Readme.md
index 3da762950..7c6fd8d0f 100644
--- a/examples/basic/src/components/Modal/Readme.md
+++ b/examples/basic/src/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>
+```
diff --git a/examples/basic/src/components/Placeholder/Readme.md b/examples/basic/src/components/Placeholder/Readme.md
index 208ff9d8d..f98f57553 100644
--- a/examples/basic/src/components/Placeholder/Readme.md
+++ b/examples/basic/src/components/Placeholder/Readme.md
@@ -1 +1,3 @@
-    <Placeholder type="beard"/>
+```jsx
+<Placeholder type="beard"/>
+```
diff --git a/examples/basic/src/components/RandomButton/Readme.md b/examples/basic/src/components/RandomButton/Readme.md
index 375d8d3e0..c5a2df5ff 100644
--- a/examples/basic/src/components/RandomButton/Readme.md
+++ b/examples/basic/src/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}/>
+```
diff --git a/examples/basic/src/components/WrappedButton/Readme.md b/examples/basic/src/components/WrappedButton/Readme.md
index 64b8f2c0a..8cfcfac09 100644
--- a/examples/basic/src/components/WrappedButton/Readme.md
+++ b/examples/basic/src/components/WrappedButton/Readme.md
@@ -1,3 +1,5 @@
 Enhanced/Decorated components work as well:
 
-    <WrappedButton>I'm a wrapped button</WrappedButton>
+```jsx
+<WrappedButton>I'm a wrapped button</WrappedButton>
+```
diff --git a/examples/cra/src/components/Placeholder.md b/examples/cra/src/components/Placeholder.md
index 208ff9d8d..f98f57553 100644
--- a/examples/cra/src/components/Placeholder.md
+++ b/examples/cra/src/components/Placeholder.md
@@ -1 +1,3 @@
-    <Placeholder type="beard"/>
+```jsx
+<Placeholder type="beard"/>
+```
diff --git a/examples/cra/src/components/RandomButton.md b/examples/cra/src/components/RandomButton.md
index 375d8d3e0..c5a2df5ff 100644
--- a/examples/cra/src/components/RandomButton.md
+++ b/examples/cra/src/components/RandomButton.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}/>
+```
diff --git a/examples/customised/src/components/Modal/Readme.md b/examples/customised/src/components/Modal/Readme.md
index f61fe51fd..4be85777d 100644
--- a/examples/customised/src/components/Modal/Readme.md
+++ b/examples/customised/src/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>
+```
diff --git a/examples/customised/src/components/Placeholder/Readme.md b/examples/customised/src/components/Placeholder/Readme.md
index 208ff9d8d..f98f57553 100644
--- a/examples/customised/src/components/Placeholder/Readme.md
+++ b/examples/customised/src/components/Placeholder/Readme.md
@@ -1 +1,3 @@
-    <Placeholder type="beard"/>
+```jsx
+<Placeholder type="beard"/>
+```
diff --git a/examples/customised/src/components/RandomButton/Readme.md b/examples/customised/src/components/RandomButton/Readme.md
index 375d8d3e0..c5a2df5ff 100644
--- a/examples/customised/src/components/RandomButton/Readme.md
+++ b/examples/customised/src/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}/>
+```
diff --git a/examples/express/src/components/CustomEndpoint/Readme.md b/examples/express/src/components/CustomEndpoint/Readme.md
index a8d9d21d6..62017ccd7 100644
--- a/examples/express/src/components/CustomEndpoint/Readme.md
+++ b/examples/express/src/components/CustomEndpoint/Readme.md
@@ -2,6 +2,6 @@ Custom Endpoint Example
 
 The example component invokes an endpoint added to the running styleguide server.
 
-```example
+```js
 <CustomEndpoint />
 ```
diff --git a/examples/preact/src/components/CounterButton/Readme.md b/examples/preact/src/components/CounterButton/Readme.md
index 4a4201833..16f004731 100644
--- a/examples/preact/src/components/CounterButton/Readme.md
+++ b/examples/preact/src/components/CounterButton/Readme.md
@@ -1 +1,3 @@
-    <CounterButton/>
+```jsx
+<CounterButton/>
+```
diff --git a/examples/preact/src/components/Modal/Readme.md b/examples/preact/src/components/Modal/Readme.md
index 3da762950..7c6fd8d0f 100644
--- a/examples/preact/src/components/Modal/Readme.md
+++ b/examples/preact/src/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>
+```
diff --git a/examples/preact/src/components/Placeholder/Readme.md b/examples/preact/src/components/Placeholder/Readme.md
index 208ff9d8d..f98f57553 100644
--- a/examples/preact/src/components/Placeholder/Readme.md
+++ b/examples/preact/src/components/Placeholder/Readme.md
@@ -1 +1,3 @@
-    <Placeholder type="beard"/>
+```jsx
+<Placeholder type="beard"/>
+```
diff --git a/examples/preact/src/components/RandomButton/Readme.md b/examples/preact/src/components/RandomButton/Readme.md
index 375d8d3e0..c5a2df5ff 100644
--- a/examples/preact/src/components/RandomButton/Readme.md
+++ b/examples/preact/src/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}/>
+```
diff --git a/examples/preact/src/components/WrappedButton/Readme.md b/examples/preact/src/components/WrappedButton/Readme.md
index 64b8f2c0a..8cfcfac09 100644
--- a/examples/preact/src/components/WrappedButton/Readme.md
+++ b/examples/preact/src/components/WrappedButton/Readme.md
@@ -1,3 +1,5 @@
 Enhanced/Decorated components work as well:
 
-    <WrappedButton>I'm a wrapped button</WrappedButton>
+```jsx
+<WrappedButton>I'm a wrapped button</WrappedButton>
+```
diff --git a/examples/sections/src/components/Label/Readme.md b/examples/sections/src/components/Label/Readme.md
index 4ca9f30fc..64b79cb18 100644
--- a/examples/sections/src/components/Label/Readme.md
+++ b/examples/sections/src/components/Label/Readme.md
@@ -1,3 +1,5 @@
 Should use the `fantasy` font inherited from `body`:
 
-    <Label />
+```jsx
+<Label />
+```
diff --git a/examples/sections/src/components/Placeholder/Example.md b/examples/sections/src/components/Placeholder/Example.md
index 0c04758ee..2572809d2 100644
--- a/examples/sections/src/components/Placeholder/Example.md
+++ b/examples/sections/src/components/Placeholder/Example.md
@@ -1,3 +1,5 @@
 Extra example file linked via `@example` doclet:
 
-    <Placeholder type="bear"/>
+```jsx
+<Placeholder type="bear"/>
+```
diff --git a/examples/sections/src/components/Placeholder/_Readme.md b/examples/sections/src/components/Placeholder/_Readme.md
index 208ff9d8d..f98f57553 100644
--- a/examples/sections/src/components/Placeholder/_Readme.md
+++ b/examples/sections/src/components/Placeholder/_Readme.md
@@ -1 +1,3 @@
-    <Placeholder type="beard"/>
+```jsx
+<Placeholder type="beard"/>
+```
diff --git a/examples/webpack/src/components/Placeholder.md b/examples/webpack/src/components/Placeholder.md
index 208ff9d8d..f98f57553 100644
--- a/examples/webpack/src/components/Placeholder.md
+++ b/examples/webpack/src/components/Placeholder.md
@@ -1 +1,3 @@
-    <Placeholder type="beard"/>
+```jsx
+<Placeholder type="beard"/>
+```
diff --git a/examples/webpack/src/components/RandomButton.md b/examples/webpack/src/components/RandomButton.md
index 375d8d3e0..c5a2df5ff 100644
--- a/examples/webpack/src/components/RandomButton.md
+++ b/examples/webpack/src/components/RandomButton.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}/>
+```