linkCode Features

This is a quick overview of codedoc specific features at your disposal in markdown code elements. For a complete list, please checkout the official documentation. You can also take a look at docs/md/docs/code-features.md to see the markdown behind this page.

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

linkHints

A comment with the following format will cause a hint to be displayed on-hover:

// --> some hint here

index.tsx
1linkimport { Renderer } from '@connectv/html';                       // --> there is a hint on this line

2link

3linkconst MyComp = ({ name }, renderer) => <div>Hellow {name}!</div> // --> there is also a hint on this line

4link

5linkconst renderer = new Renderer();

6linkrenderer.render(

7link  <fragment>

8link    <MyComp name='World'/>

9link    <MyComp name='Fellas'/>                                      {/* --> also this is a hint */}

10link  </fragment>

11link)

12link.on(document.body);

The following syntax styles are supported:

1link"// --> standard one-liner" // --> standard one-liner

1link"/* --> standard multi-liner */" /* --> standard multi-liner */

1link"# --> python/bash comments" # --> python/bash comments

1link<‌!--> html comments --> <!--> html comments -->

linkReferences

Add a comment with following format in the code will show a link on-hover over the line:

// @see https://www.google.com

1linkimport { Renderer } from '@connectv/html';                       // @see https://github.com/CONNECT-platform/connective-html

You can also use the markdown link format to give your links a title:

1link```

2linkimport { Renderer } from '@connectv/html'; // @see [CONNECTIVE HTML Docs](https://github.com/CONNECT-platform/connective-html)

3link```

1linkimport { Renderer } from '@connectv/html';                       // @see [CONNECTIVE HTML Docs](https://github.com/CONNECT-platform/connective-html)

You can also use these references to refer to another tab in a tab-component:

some-doc.md
1link> :Tabs

2link> > :Tab title=First Tab

3link> >

4link> > ```tsx

5link> > import { func } from './other'; // @see tab:Second Tab

6link> >

7link> > func(); // --> good stuff will happen now

8link> > ```

9link>

10link> > :Tab title=Second Tab

11link> >

12link> > ```tsx

13link> > export function func() {

14link> >   console.log('Good Stuff!');

15link> > }

16link> > ```

1linkimport { func } from './other'; // @see tab:Second Tab

2link

3linkfunc(); // --> good stuff will happen now

1linkexport function func() {

2link  console.log('Good Stuff!');

3link}

Similar syntax styles to hints are supported for references as well:

1link"// @‌see [random stuff](https://www.randomlists.com/things)" // @see [random stuff](https://www.randomlists.com/things)

1link"/* @‌see https://google.com */" /* @see https://google.com */

1link"#@see https://github.com" #@see https://github.com

1link<!-- @‌see [the first page](/) --> <!-- @see [the first page](/) -->