除了在文档中使用示例<example name="{name}" />组件外，Docgeni 还提供了如下内置组件作为 Markdown 语法的扩展：

Label

使用label可以创建一个标签: Hello Docgeni

html
<label>Hello Docgeni</label>

标签提供了如下多种类型：

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

使用alert创建一个提示框，type 可选 primary、info、success、warning、danger，默认为 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+

使用 tabs 与 tab 标签创建可切换的 Tab 内容区，label 属性为 Tab 标题。tabs 支持 mode 属性，可选 simple 或 code-group，分别对应不同的风格。

typescript
const value = 1;

html
<tabs mode="simple">
  <tab label="苹果">
    这是一个 🍎
  </tab>
  <tab label="橘子">
    这是一个 🍊
  </tab>
  <tab label="香蕉">
    这是一个 🍌
  </tab>
  <tab label="代码段">
```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+

需要将多代码块合并成一个分组进行展示时，可以使用 CodeGroup 语法，例如：

:::code-group

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

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

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

:::

将会被渲染为：

bash
npm install -D @docgeni/cli

bash
yarn add -D @docgeni/cli

bash
pnpm add -D @docgeni/cli

可以理解为这是 Tabs 的 Markdown 写法。

Embed

Embed 组件可以在一个 Markdown 文档中嵌入另一个 Markdown 文档的内容：

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

展示效果如下：

除了全量引入外还支持指定行号和区间:

html
<!-- 引入 Markdown 文件全部内容 -->
<embed src="/path/to/some.md"></embed>

<!-- 引入指定行号的 Markdown 文件内容 -->
<embed src="/path/to/some.md#L1"></embed>

<!-- 引入指定行号区间的 Markdown 文件部分内容 -->
<embed src="/path/to/some.md#L5-L10"></embed>

自定义内置组件

在默认的.docgeni/components文件夹下创建自定义内置组件，文件结构如下：

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

自定义组件需继承 DocgeniBuiltInComponent，推荐使用 Signal input()。更多目录与站点集成说明见 自定义站点。

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,
};

在 Markdown 中使用组件的选择器my-color编写如下语法：

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

展示效果：Color

内置组件配置第三方依赖，在.docgeni/components文件夹中新建module.ts，输入如下代码即可:

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

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

这样就可以在自定义内置组件中使用CommonModule和FormsModule导出的组件和服务。 当然如果自定义组件是一个独立组件，无需定义module.ts，直接在独立组件中导入需要的模块即可。