linkButtons

You can add buttons to your markdown like this:

1link> :Buttons

2link> > :Button label=GitHub, url=https://github.com

You can have multiple buttons in a row:

1link> :Buttons

2link> > :Button label=GitHub, url=https://github.com

3link>

4link> > :Button label=NPM, url=https://npmjs.org

linkIcon Buttons

You can have icons on your buttons:

1link> :Buttons

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

3link>

4link> > :Button label=NPM, url=https://npmjs.org

The icons are read from the configured icon-font, which is by default Material Icons. You can override this in .codedoc/config.ts as well.

linkCopy Button

There is a special CopyButton component, that when placed after a code snippet, will copy the whole contents of the code snippet:

1link> :Buttons

2link> > :CopyButton

The copy button by default reads the value filter_none from the icon-font. If you want to use a custom icon-font, you should either make sure that it has a filter_none icon that looks like a copy icon, or that you provide your own custom CopyButton component:

.codedoc/components/copy-button.tsx
1linkimport { RendererLike } from '@connectv/html';

2linkimport { Button } from '@codedoc/core/components';

3link

4link

5linkexport function CopyButton(_: any, renderer: RendererLike<any, any>) {

6link  return <Button icon='true' onclick='smartCopy(this)' label='icon-copy'/>;

7link}

.codedoc/config.ts
1linkimport { configuration, DefaultMarkdownCustomComponents } from '@codedoc/core';

2link

3linkimport { theme } from './theme';

4linkimport { CopyButton } from './components/copy-button';

5link

6link

7linkexport const config = /*#__PURE__*/configuration({

8link // ...

9link  markdown: {

10link    customComponents: {

11link      ...DefaultMarkdownCustomComponents,

12link      CopyButton,

13link    }

14link  },

15link // ...

16link});

Read here for more details on creating custom markdown components in codedoc.