Docs: Update examples syntax

examples/basic/src/components/CounterButton/Readme.md

@@ -1 +1,3 @@
-    <CounterButton/>
+```js
+<CounterButton/>
+```

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>
+```

examples/basic/src/components/Placeholder/Readme.md

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

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}/>
+```

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>
+```

examples/cra/src/components/Placeholder.md

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

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}/>
+```

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>
+```

examples/customised/src/components/Placeholder/Readme.md

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

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}/>
+```

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 />
 ```

examples/preact/src/components/CounterButton/Readme.md

@@ -1 +1,3 @@
-    <CounterButton/>
+```jsx
+<CounterButton/>
+```

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>
+```

examples/preact/src/components/Placeholder/Readme.md

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

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}/>
+```

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>
+```

examples/sections/src/components/Label/Readme.md

@@ -1,3 +1,5 @@
 Should use the `fantasy` font inherited from `body`:
 
-    <Label />
+```jsx
+<Label />
+```

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"/>
+```

examples/sections/src/components/Placeholder/_Readme.md

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

examples/webpack/src/components/Placeholder.md

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

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}/>
+```