mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 16:51:09 +08:00
160 lines
3.6 KiB
Plaintext
160 lines
3.6 KiB
Plaintext
import { Meta } from '@storybook/addon-docs/blocks';
|
|
import { Icons } from '@storybook/components';
|
|
|
|
<Meta title="Addons/Docs/markdown-docs" />
|
|
|
|
# h1 Heading
|
|
|
|
## h2 Heading
|
|
|
|
### h3 Heading
|
|
|
|
#### h4 Heading
|
|
|
|
##### h5 Heading
|
|
|
|
###### h6 Heading
|
|
|
|
## Paragraphs
|
|
|
|
The Storybook design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.
|
|
|
|
SDS was created by Kyle Suss, Dominic Nguyen (me!), and Michael Shilman with invaluable accessibility contributions from Jimmy Somsanith.
|
|
|
|
## Emphasis
|
|
|
|
**This is bold text**
|
|
|
|
**_This is bold italic text_**
|
|
|
|
_This is italic text_
|
|
|
|
_This is italic text_
|
|
|
|
~~Strikethrough~~
|
|
|
|
## Blockquotes
|
|
|
|
> Blockquotes can also be nested...
|
|
>
|
|
> > ...by using additional greater-than signs right next to each other...
|
|
> >
|
|
> > > ...or with spaces between arrows.
|
|
|
|
## Lists
|
|
|
|
Unordered
|
|
|
|
- Create a list by starting a line with `+`, `-`, or `*`
|
|
- Sub-lists are made by indenting 2 spaces:
|
|
- Marker character change forces new list start:
|
|
- Ac tristique libero volutpat at
|
|
* Facilisis in pretium nisl aliquet
|
|
- Nulla volutpat aliquam velit
|
|
- Very easy!
|
|
- Marker character change forces new list start:
|
|
- Ac tristique libero volutpat at
|
|
* Facilisis in pretium nisl aliquet
|
|
- Nulla volutpat aliquam velit
|
|
- Final item
|
|
|
|
Ordered
|
|
|
|
1. Lorem ipsum dolor sit amet
|
|
2. Consectetur adipiscing elit
|
|
3. Integer molestie lorem at massa
|
|
|
|
Start numbering with offset:
|
|
|
|
57. foo
|
|
1. bar
|
|
|
|
## Code
|
|
|
|
Inline `code`
|
|
|
|
Indented code
|
|
|
|
// Some comments
|
|
line 1 of code
|
|
line 2 of code
|
|
line 3 of code
|
|
|
|
Block code "fences"
|
|
|
|
```
|
|
Sample text here...
|
|
```
|
|
|
|
JS syntax highlighting
|
|
|
|
```js
|
|
var foo = function (bar) {
|
|
return bar++;
|
|
};
|
|
|
|
console.log(foo(5));
|
|
```
|
|
|
|
CSS syntax
|
|
|
|
```css
|
|
.foo {
|
|
color: #eee;
|
|
}
|
|
```
|
|
|
|
HTML syntax
|
|
|
|
```html
|
|
<h1>yo html</h1>
|
|
|
|
<p>And here we go</p>
|
|
```
|
|
|
|
## Tables
|
|
|
|
| Option | Description |
|
|
| ------ | ------------------------------------------------------------------------- |
|
|
| data | path to data files to supply the data that will be passed into templates. |
|
|
| engine | engine to be used for processing templates. Handlebars is the default. |
|
|
| ext | extension to be used for dest files. |
|
|
|
|
Right aligned columns
|
|
|
|
| Option | Description |
|
|
| -----: | ------------------------------------------------------------------------: |
|
|
| data | path to data files to supply the data that will be passed into templates. |
|
|
| engine | engine to be used for processing templates. Handlebars is the default. |
|
|
| ext | extension to be used for dest files. |
|
|
|
|
Table with icons
|
|
|
|
| SVG | Name |
|
|
| ----------------------- | -------- |
|
|
| <Icons icon="mobile" /> | `mobile` |
|
|
| <Icons icon="grid" /> | `grid` |
|
|
| <Icons icon="alert" /> | `alert` |
|
|
| <Icons icon="check" /> | `check` |
|
|
|
|
## Links
|
|
|
|
[external link](https://hichroma.com)
|
|
|
|
[external link with title](https://hichroma.com 'Insert title!')
|
|
|
|
[link to in page anchor](#h1-heading)
|
|
|
|
[link to another story (docs)](?path=/docs/addons-docs-docs-only--page)
|
|
|
|
[link to another story (canvas)](?path=/story/addons-docs-buttongroup--basic)
|
|
|
|
[link to about page](?path=/settings/about)
|
|
|
|
[link to absolute local url](/absolute)
|
|
|
|
## Images
|
|
|
|
|
|
|