In addition to using the example <example name="{name}" /> component in the document, Docgeni also provides the following built-in components as extensions of markdown syntax:

Label

Use 'label' to create a label: Hello Docgeni

html
<label>Hello Docgeni</label>

The following types of labels are available:

html
<label type="primary">Label</label>
<label type="info">Label</label>
<label type="default">Label</label>
<label type="light">Label</label>
<label type="success">Label</label>
<label type="warning">Label</label>
<label type="danger">Label</label>

<label type="outline-primary">Label</label>
<label type="outline-info">Label</label>
<label type="outline-default">Label</label>
<label type="outline-light">Label</label>
<label type="outline-success">Label</label>
<label type="outline-warning">Label</label>
<label type="outline-danger">Label</label>

Alert

Use alert to create a alert box. the type can be primary, info, success,warning,danger, the default type is info.

html
<alert>Hello Docgeni</alert>

html

<alert type="primary">Primary</alert>
<alert type="info">Info</alert>
<alert type="success">Success</alert>
<alert type="warning">Warning</alert>
<alert type="danger">Danger</alert>

Tabs 3.0.0+

Use tabs and tab to create switchable tab panels. The label attribute sets the tab title. The tabs element supports a mode attribute with simple or code-group for different styles.

typescript
const value = 1;

html
<tabs mode="simple">
  <tab label="Apple">
    This is an 🍎
  </tab>
  <tab label="Orange">
    This is an 🍊
  </tab>
  <tab label="Banana">
    This is an 🍌
  </tab>
  <tab label="Code">
```typescript
const value = 1;
\```
  </tab>
</tabs>

bash
npm install -D @docgeni/cli

bash
pnpm add -D @docgeni/cli

bash
yarn add -D @docgeni/cli

CodeGroup 3.0.0+

When you need to group multiple code blocks into a single panel, use the CodeGroup syntax, for example:

:::code-group

```bash [npm]
npm install -D @docgeni/cli
```

````bash [yarn]
yarn add -D @docgeni/cli
```

```bash [pnpm]
pnpm add -D @docgeni/cli
```

:::

This will be rendered as:

bash
npm install -D @docgeni/cli

bash
yarn add -D @docgeni/cli

bash
pnpm add -D @docgeni/cli

You can think of this as the Markdown syntax for Tabs.

Embed

The embed component can embed the contents of another markdown document in one markdown document:

html
<embed src="./foo.md"></embed>

Preview as below:

It also supports specifying line numbers and intervals:

html
<!-- Import all contents of markdown file -->
<embed src="/path/to/some.md"></embed>

<!-- Import the contents of the markdown file with the specified line number -->
<embed src="/path/to/some.md#L1"></embed>

<!-- Import some contents of the markdown file in the specified line number range -->
<embed src="/path/to/some.md#L5-L10"></embed>

Custom Built-in Components

Create custom built-in components in the default dir .docgeni/components, such as the following structure:

html
.docgeni
└── components
    ├── color
    │   ├── color.component.ts    
    │   ├── color.component.html
    ├── module.ts

Custom components extend DocgeniBuiltInComponent. Prefer Signal input(). See Customize site for folder layout and site integration.

ts
import { ChangeDetectionStrategy, Component, effect, input } from '@angular/core';
import { DocgeniBuiltInComponent } from '@docgeni/template';

@Component({
    selector: 'my-color',
    templateUrl: './color.component.html',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyColorComponent extends DocgeniBuiltInComponent {
    readonly color = input<string>('');

    private readonly colorEffect = effect(() => {
        if (this.color()) {
            this.hostElement.style.color = this.color();
        }
    });
}

export default {
    selector: 'my-color',
    component: MyColorComponent,
};

Write the following syntax in markdown:

html
<my-color color="red">Color</my-color>

Preview: Color

Built in components configure third-party dependencies, new file named module.ts in .docgeni/components folder and type following code:

ts
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

export default {
    imports: [FormsModule, CommonModule],
    providers: []
};

In this way, the components and directives exported by CommonModule and FormsModule can be used in custom built-in components.

If the custom component is a standalone component, there is no need to define module.ts, simply import the required modules into the standalone component.