linkMarkdown Config

The markdown config determines which components are to be used for which markdown elements. For example, you can provide your own custom heading component:

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

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

3link

4link

5linkexport function Heading(options: HeadingOptions, renderer: RendererLike<any, any>, content: any) {

6link  return <h1 id={options.slug}># {content}</h1>          // --> all headings are H1s, and they start with a #

7link}

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

2link

3linkimport { Heading } from './components/heading';

4link

5link//...

6link

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

8link  //...

9link  markdown: {

10link    Heading,             // --> use your custom heading instead of the default heading component

11link  }

12link  //...

13link});

CODEDOC uses @connectv/marked for transforming markdowns to HTML, which is how you can use TSX-based components in place of standard markdown structures like headings.

linkCustom Components

@connectv/marked also supports custom components, i.e. TSX-components for user-defined non-standard markdown structures. This is how CODEDOC's enhanced features like buttons and tabs work. You can also provide your own custom components and use them in your markdown files.

linkToC Markdown

CODEDOC uses a separate configuration for parsing the ToC markdown file, designated via the tocMarkdown config. This allows for having ToC specific components and structures. If you need to override the standard markdown elements of your ToC or need to add custom components just for use in the ToC, simply add them to tocMarkdown property instead of markdown property.