Star

MIT License
Copyright © 2020
CONNECT-platform

linkButtons

You can add buttons to your markdown like this:

1> :Buttons

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

GitHub

You can have multiple buttons in a row:

1> :Buttons

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

3>

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

GitHubNPM

linkIcon Buttons

You can have icons on your buttons:

1> :Buttons

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

3>

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

codeNPM

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.

Learn More about Custom Icon Font

linkCopy Button

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

1> :Buttons

2> > :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
1import { RendererLike } from '@connectv/html';

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

3

4

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

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

7}

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

2

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

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

5

6

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

8 // ...

9 markdown: {

10 customComponents: {

11 ...DefaultMarkdownCustomComponents,

12 CopyButton,

13 }

14 },

15 // ...

16});

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

ButtonsIcon ButtonsCopy Button

Home Overview CLI Theme

Markdownchevron_right
Code Featureschevron_right

Images & Assets

Configurationchevron_right
Customizationchevron_right