# Building blocks

Source: https://apigenie.pl/docs/reference/doc-components/building-blocks
Part of the reference of [@mykulyak/apigenie-docs](https://apigenie.pl/docs/reference/doc-components.md).
Its other pages: [apg-api-reference and apg-spec](https://apigenie.pl/docs/reference/doc-components/reference-and-spec.md), [OpenAPI elements](https://apigenie.pl/docs/reference/doc-components/openapi.md), [Swagger 2.0 elements](https://apigenie.pl/docs/reference/doc-components/swagger.md), [AsyncAPI elements](https://apigenie.pl/docs/reference/doc-components/asyncapi.md), [Protobuf and gRPC elements](https://apigenie.pl/docs/reference/doc-components/protobuf.md), [GraphQL elements](https://apigenie.pl/docs/reference/doc-components/graphql.md), [Try it out](https://apigenie.pl/docs/reference/doc-components/try-it-out.md), [Theming](https://apigenie.pl/docs/reference/doc-components/theming.md), [Server-side rendering](https://apigenie.pl/docs/reference/doc-components/server-side-rendering.md), [apigenie-docs build](https://apigenie.pl/docs/reference/doc-components/docs-build.md).

The elements the others are built from, for content of your own next to them: descriptions in
Markdown, code with a copy button, and the label of a method or an operation's kind.

## `<apg-markdown>`

CommonMark/GFM from the document, sanitized: raw HTML is shown as text, links are limited to
http(s)/mailto and open in a new tab, and `#/components/schemas/X` links go to the schema page.

Loaded on its own with `import "@mykulyak/apigenie-docs/components/apg-markdown";`.

### Attributes

| Attribute | Property | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `source` | `source` | `string` |  | Markdown text. |
| `inline` | `inline` | `boolean` | `false` | Render inline content only (no paragraphs). |

And `spec-url`, `spec`, `api` and `theme`, like every element that shows a document: [Where the document comes from](/docs/reference/doc-components#where-the-document-comes-from).

### Events

| Event | Description |
| --- | --- |
| `apg-navigate` | A schema link was followed; cancelable. |

### CSS parts

| Part | Description |
| --- | --- |
| `markdown` | The rendered content. |

## `<apg-code-block>`

Code with a copy button. JSON is pretty-printed and highlighted.

Loaded on its own with `import "@mykulyak/apigenie-docs/components/apg-code-block";`.

### Attributes

| Attribute | Property | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `code` | `code` | `string` | `""` | The code shown. |
| `language` | `language` | `"json" \| "auto" \| "text"` | `"auto"` | `json` pretty-prints and highlights; `auto` does so when the code parses as JSON. |
| `wrap` | `wrap` | `boolean` | `false` | Wraps long lines instead of scrolling. |
| `no-copy` | `noCopy` | `boolean` | `false` | Hides the copy button. |
| `copy-label` | `copyLabel` | `string` | `"Copy"` | Label of the copy button (for screen readers and the tooltip). |

### CSS parts

| Part | Description |
| --- | --- |
| `code-block` | The container. |
| `code` | The `<pre>` element. |
| `copy-button` | The copy button. |

### CSS custom properties

| Property | Description |
| --- | --- |
| `--apg-syntax-key` | Colour of JSON keys (likewise `-string`, `-number`, `-boolean`, `-null`). |

## `<apg-method-badge>`

HTTP method label, the action of an AsyncAPI operation (`send`, `receive`), the streaming
kind of a gRPC method (`unary`, `server-stream`, `client-stream`, `bidi`), or the kind of a
GraphQL operation (`query`, `mutation`, `subscription`).

Loaded on its own with `import "@mykulyak/apigenie-docs/components/apg-method-badge";`.

### Attributes

| Attribute | Property | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `method` | `method` | `string` | `"get"` | The method, action, streaming kind or operation kind, such as `get`, `receive`, `bidi` or `query`. |
| `compact` | `compact` | `boolean` | `false` | Smaller variant used in navigation lists. |

### CSS parts

| Part | Description |
| --- | --- |
| `method` | The label; it also has the part `method-<name>` (for example `method-get`). |

### CSS custom properties

| Property | Description |
| --- | --- |
| `--apg-method-get` | Colour of GET (likewise `--apg-method-post`, `-put`, `-patch`, `-delete`, `-head`, `-options`, `-trace`). |
| `--apg-method-send` | Colour of AsyncAPI `send` operations (likewise `--apg-method-receive`). |
| `--apg-method-unary` | Colour of unary gRPC methods (likewise `--apg-method-server-stream`, `-client-stream`, `-bidi`). |
| `--apg-method-query` | Colour of GraphQL queries (likewise `--apg-method-mutation`, `-subscription`). |