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
1link> :Buttons

2link> > :Button label=Click Me!, url=https://www.google.com

3link>

4link> > :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
1link> :Buttons

2link> > :Button icon=true, label=android, url=https://www.google.com

3link>

4link> > :Button icon=true, label=code, url=https://www.github.com

5link>

6link> > :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
1link> :Buttons

2link> > :CopyButton

linkTabs

You can add tabbed content like this:

some-doc.md
1link> :Tabs

2link> > :Tab title=First Tab

3link> >

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

5link> > ```tsx | index.tsx

6link> > import { Renderer } from '@connectv/html';

7link> >

8link> > const renderer = new Renderer();

9link> > renderer.render(<div>Hellow World!</div>).on(document.body);

10link> > ```

11link>

12link> > :Tab title=Second Tab

13link> >

14link> > Perhaps some other content here, maybe some more code?

15link> >

16link> > ```tsx | another.tsx

17link> > import { Renderer } from '@connectv/html';

18link> > import { timer } from 'rxjs';

19link> >

20link> > const renderer = new Renderer();

21link> > renderer.render(<div>You have been here for {timer(0, 1000)} second(s).</div>)

22link> > .on(document.body);

23link> > ```

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

2link

3linkconst renderer = new Renderer();

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

another.tsx
1linkimport { Renderer } from '@connectv/html';

2linkimport { timer } from 'rxjs';

3link

4linkconst renderer = new Renderer();

5linkrenderer.render(<div>You have been here for {timer(0, 1000)} second(s).</div>)

6link.on(document.body);

linkCollapse

You can add collapsible sections like this:

some-doc.md
1link> :Collapse label=Collapsible content (click to open)

2link>

3link> This content is collapsed by default. You can write _any_ markdown syntax you would

4link> like here as this is simply just an enhanced `block quote` element. You can even have lists:

5link> - with multiple

6link> - items and stuff

7link>

8link> > :Collapse label=Or nested collapsible content (click to open)

9link> >

10link> > > :Collapse label=Collapception

11link> > >

12link> > >  To any depth that your heart might desire.

13link>

14link> This component is particularly useful in the table of contents (the left-side menu, activatable by

15link> clicking on the hamburger menu in the footer), when you have got many documents and you would want to

16link> 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
1link> :DarkLight

2link> > :InDark

3link> >

4link> > We are SO DARK! This content is only shown in dark-mode. Switch to light-mode

5link> > by clicking on the dark/light toggle in the footer to see the light-mode specific content.

6link>

7link> > :InLight

8link> >

9link> > LIGHT bless you! This content is only shown in light-mode. Switch to dark-mode

10link> > 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:

1link> :DarkLight

2link> > :InLight

3link> >

4link> > ![header](https://raw.githubusercontent.com/CONNECT-platform/codedoc/master/repo-banner.svg?sanitize=true)

5link>

6link> > :InDark

7link> >

8link> > ![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:

1link> :ToCPrevNext

Which would then look like this: