Skip to content

Commit

Permalink
Docs: Use “interactive playground” everywhere.
Browse files Browse the repository at this point in the history
  • Loading branch information
sapegin committed Jul 26, 2017
1 parent 88724cd commit 1915862
Show file tree
Hide file tree
Showing 7 changed files with 14 additions and 14 deletions.
14 changes: 7 additions & 7 deletions docs/Documenting.md
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions examples/basic/src/components/Button/Readme.md
Expand Up @@ -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>
Expand All @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion examples/cra/src/components/Button.md
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion examples/customised/src/components/Button/Readme.md
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion examples/preact/src/components/Button/Readme.md
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion examples/sections/src/components/Button/Readme.md
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion examples/webpack/src/components/Button.md
Expand Up @@ -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';
Expand Down

0 comments on commit 1915862

Please sign in to comment.