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.

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

linkButtons

You can add buttons to your documents like this:

some-doc.md
1> :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:

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

some-doc.md
1> :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:

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

some-doc.md
1> :Buttons

2>

3> > :CopyButton

linkTabs

You can add tabbed content like this:

some-doc.md
1> :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> > ```

index.tsx
1import { Renderer } from '@connectv/html'

2

3const renderer = new Renderer()

4renderer.render(<div>Hellow World!</div>).on(document.body)

another.tsx
1import { 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)

linkCollapse

You can add collapsible sections like this:

some-doc.md
1> :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.

linkDark/Light Content

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

some-doc.md
1> :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

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.

linkNavigation

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

1> :ToCPrevNext

Which would then look like this: