import { Meta } from '@storybook/addon-docs';
import { Icons, Code } 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, without prefix)](/docs/addons-docs-docs-only--page)

[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

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg 'The Stormtroopocat')

## Code

<Code>{'first'}, second</Code>

<Code>{['first', 'second']}</Code>

<Code>{<b>first</b>}, second</Code>

<Code>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum {'commodo nibh'},
  sollicitudin posuere elit varius sed. Curabitur non risus et eros blandit consequat. Cras rutrum
  dignissim convallis.
</Code>
