# Autorestic | Markdown Cheat Sheet

Star
Created With

# linkMarkdown Cheat Sheet

Checkout `docs/md/docs/cheat-sheet.md` to see the markdown behind this page. Note that this is only a cheat-sheet, for a more complete list of specific markdown features of codedoc, check out the official docs.

Official Docs
<marker>
</marker>

> Do not forget to REMOVE THIS PAGE from your actual documentation!

<marker>

</marker>

## linkButtons

You can add buttons to your documents like this:

    some-doc.md1> :Buttons
    2>
    3> > :Button label=Click Me!, url=https://www.google.com
    4>
    5> > :Button label=Click Me Too!, url=https://www.github.com

Which looks like this:

Click Me! Click Me Too!
<marker>
</marker>

You can create icon buttons as well. By default material icons are used:

    some-doc.md1> :Buttons
    2>
    3> > :Button icon=true, label=android, url=https://www.google.com
    4>
    5> > :Button icon=true, label=code, url=https://www.github.com
    6>
    7> > :Button label=GitHub, url=https://www.github.com

Which looks like this:

android code GitHub
<marker>
</marker>

You can add a copy button after a `code` element. This button would copy the contents of the `code` element.

    some-doc.md1> :Buttons
    2>
    3> > :CopyButton

<marker>

</marker>

## linkTabs

You can add tabbed content like this:

    some-doc.md1> :Tabs
    2>
    3> > :Tab title=First Tab
    4> >
    5> > So this is the content of the first tab. Lets even have some code here:
    6> >
    7> > ```tsx | index.tsx
    8> > import { Renderer } from '@connectv/html'
    9> >
    10> > const renderer = new Renderer()
    11> > renderer.render(<div>Hellow World!</div>).on(document.body)
    12> > ```
    13>
    14> > :Tab title=Second Tab
    15> >
    16> > Perhaps some other content here, maybe some more code?
    17> >
    18> > ```tsx | another.tsx
    19> > import { Renderer } from '@connectv/html'
    20> > import { timer } from 'rxjs'
    21> >
    22> > const renderer = new Renderer()
    23> > renderer
    24> >   .render(<div>You have been here for {timer(0, 1000)} second(s).</div>)
    25> >   .on(document.body)
    26> > ```

<marker>
</marker>

So this is the content of the first tab. Lets even have some code here:

    index.tsx1import { Renderer } from '@connectv/html'
    2
    3const renderer = new Renderer()
    4renderer.render(<div>Hellow World!</div>).on(document.body)

Perhaps some other content here, maybe some more code?

    another.tsx1import { Renderer } from '@connectv/html'
    2import { timer } from 'rxjs'
    3
    4const renderer = new Renderer()
    5renderer
    6  .render(<div>You have been here for {timer(0, 1000)} second(s).</div>)
    7  .on(document.body)

<marker>

</marker>

## linkCollapse

You can add collapsible sections like this:

    some-doc.md1> :Collapse label=Collapsible content (click to open)
    2>
    3> This content is collapsed by default. You can write _any_ markdown syntax you would
    4> like here as this is simply just an enhanced `block quote` element. You can even have lists:
    5>
    6> - with multiple
    7> - items and stuff
    8>
    9> > :Collapse label=Or nested collapsible content (click to open)
    10> >
    11> > > :Collapse label=Collapception
    12> > >
    13> > > To any depth that your heart might desire.
    14>
    15> This component is particularly useful in the table of contents (the left-side menu, activatable by
    16> clicking on the hamburger menu in the footer), when you have got many documents and you would want to
    17> neatly categorize them.

<marker>
</marker>
Collapsible content (click to open)chevron_right

This content is collapsed by default. You can write any markdown syntax you would like here as this is simply just an enhanced `block quote` element. You can even have lists:

- with multiple
- items and stuff

Or nested collapsible content (click to open)chevron_right
Collapception (click to open)chevron_right

To any depth that your heart might desire.

This component is particularly useful in the table of contents (the left-side menu, activatable by clicking on the hamburger menu in the footer), when you have got many documents and you would want to neatly categorize them.

<marker>

</marker>

## linkDark/Light Content

If you have some content that differs in light mode vs in dark mode, you can use `DarkLight` component:

    some-doc.md1> :DarkLight
    2>
    3> > :InDark
    4> >
    5> > We are SO DARK! This content is only shown in dark-mode. Switch to light-mode
    6> > by clicking on the dark/light toggle in the footer to see the light-mode specific content.
    7>
    8> > :InLight
    9> >
    10> > LIGHT bless you! This content is only shown in light-mode. Switch to dark-mode
    11> > by clicking on the dark/light toggle in the footer to see the dark-mode specific content

<marker>
</marker>

We are SO DARK! This content is only shown in dark-mode. Switch to light-mode by clicking on the dark/light toggle in the footer to see the light-mode specific content.

LIGHT bless you! This content is only shown in light-mode. Switch to dark-mode by clicking on the dark/light toggle in the footer to see the dark-mode specific content

> If you are wondering why someone would EVER need such a thing, well I did. Because I wanted to display different banner images based on dark-mode / light-mode:

>     1> :DarkLight
>     2>
>     3> > :InLight
>     4> >
>     5> > ![header](https://raw.githubusercontent.com/CONNECT-platform/codedoc/master/repo-banner.svg?sanitize=true)
>     6>
>     7> > :InDark
>     8> >
>     9> > ![header](https://raw.githubusercontent.com/CONNECT-platform/codedoc/master/repo-banner-dark.svg?sanitize=true)

> Yeah I know the life of an idealist is never easy.

<marker>

</marker>

## linkNavigation

You can add previous and next buttons to your pages like this:

    1> :ToCPrevNext

Which would then look like this:

Markdown Cheat Sheet Buttons Tabs Collapse Dark/Light Content Navigation