Skip to content
Permalink
Browse files
Docs: Use “interactive playground” everywhere.
  • Loading branch information
sapegin committed Jul 26, 2017
1 parent 88724cd commit 1915862a56d079a4dbf94c6b0028faa57622be01
@@ -43,26 +43,26 @@ export default class Button extends React.Component {
## Usage examples and Readme files

Styleguidist will look for any `Readme.md` or `ComponentName.md` files in the component’s folder and display them. Any code block with a language tag of `js`, `jsx` or `javascript` will be rendered as a React component with a live editable preview.
Styleguidist will look for any `Readme.md` or `ComponentName.md` files in the component’s folder and display them. Any code block with a language tag of `js`, `jsx` or `javascript` will be rendered as a React component with an interactive playground.

React component example:

```js
<Button size="large">Push Me</Button>
```

You can disable an editor by passing a 'noeditor' modifier:
You can disable an editor by passing a `noeditor` modifier:

```jsx noeditor
<Button>Push Me</Button>
```
You can disable a playground by passing a 'static' modifier:

To render an example as highlighted source code add a `static` modifier:

```jsx static
import React from 'react';
```

Examples with all other languages are rendered only as highlighted source code, not an actual component:

```html
@@ -12,7 +12,7 @@ Big pink button:

And you *can* **use** `any` [Markdown](http://daringfireball.net/projects/markdown/) here.

Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as an interactive playgrounds:
Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as a interactive playgrounds:

```jsx
<Button>Push Me</Button>
@@ -24,7 +24,7 @@ You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor`
<Button>Push Me</Button>
```

You can disable playground by passing a `static` modifier (```` ```js static````):
To render an example as highlighted source code add a `static` modifier: (```` ```js static````):

```js static
import React from 'react';
@@ -24,7 +24,7 @@ You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor`
<Button>Push Me</Button>
```

You can disable playground by passing a `static` modifier (```` ```js static````):
To render an example as highlighted source code add a `static` modifier (```` ```js static````):

```js static
import React from 'react';
@@ -24,7 +24,7 @@ You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor`
<Button>Push Me</Button>
```

You can disable playground by passing a `static` modifier (```` ```js static````):
To render an example as highlighted source code add a `static` modifier (```` ```js static````):

```js static
import React from 'react';
@@ -24,7 +24,7 @@ You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor`
<Button>Push Me</Button>
```

You can disable playground by passing a `static` modifier (```` ```js static````):
To render an example as highlighted source code add a `static` modifier (```` ```js static````):

```js static
import React from 'react';
@@ -24,7 +24,7 @@ You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor`
<Button>Push Me</Button>
```

You can disable playground by passing a `static` modifier (```` ```js static````):
To render an example as highlighted source code add a `static` modifier (```` ```js static````):

```js static
import React from 'react';
@@ -24,7 +24,7 @@ You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor`
<Button>Push Me</Button>
```

You can disable playground by passing a `static` modifier (```` ```js static````):
To render an example as highlighted source code add a `static` modifier (```` ```js static````):

```js static
import React from 'react';

0 comments on commit 1915862

Please sign in to comment.