# Autorestic | Code Features

Star
Created With

# 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.

Official Docs
<marker>
</marker>

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

<marker>

</marker>

## linkHints

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

> `// --> some hint here`

    index.tsx1import { Renderer } from '@connectv/html';                       // --> there is a hint on this line
    2
    3const MyComp = ({ name }, renderer) => <div>Hellow {name}!</div> // --> there is also a hint on this line
    4
    5const renderer = new Renderer();
    6renderer.render(
    7  <fragment>
    8    <MyComp name='World'/>
    9    <MyComp name='Fellas'/>                                      {/* --> also this is a hint */}
    10  </fragment>
    11)
    12.on(document.body);

<marker>
</marker>

The following syntax styles are supported:

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

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

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

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

<marker>

</marker>

## linkReferences

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

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

    1import { 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:

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

    1import { 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.md1> :Tabs
    2> > :Tab title=First Tab
    3> >
    4> > ```tsx
    5> > import { func } from './other'; // @see tab:Second Tab
    6> >
    7> > func(); // --> good stuff will happen now
    8> > ```
    9>
    10> > :Tab title=Second Tab
    11> >
    12> > ```tsx
    13> > export function func() {
    14> >   console.log('Good Stuff!');
    15> > }
    16> > ```

<marker>
</marker>

    1import { func } from './other'; // @see tab:Second Tab
    2
    3func(); // --> good stuff will happen now

    1export function func() {
    2  console.log('Good Stuff!');
    3}

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

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

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

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

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

Code Features Hints References