# Markdoc tags

Use Markdoc tags in your project to add rich formatting, interactivity and reuse capability to your content.

## Built-in tags

The following Markdoc tags are included with the official Markdoc package:

- [Partial](/docs/realm/content/markdoc-tags/partial): Reuse content between project pages.
- [Table](/docs/realm/content/markdoc-tags/table): Create rich tables with less syntax.
- [If and else](/docs/realm/content/markdoc-tags/if-else): Add condition that must be fulfilled to render content.


## Redocly tags

The following Markdoc tags are custom-made by Redocly:

- [Admonition](/docs/realm/content/markdoc-tags/admonition): Add color-coded banners to highlight important information.
- [Cards](/docs/realm/content/markdoc-tags/cards): Organize links in a "card" or "tile" layout.
- [Code snippet](/docs/realm/content/markdoc-tags/code-snippet): Pull fragments code files directly into your documentation pages.
- [Code group](/docs/realm/content/markdoc-tags/code-group): Organize a series of `code-snippet` tags into a tabbed layout.
- [Code walkthrough](/docs/realm/content/markdoc-tags/code-walkthrough): Create interactive, step-by-step instructions for complex code development tasks.
  - [Step](/docs/realm/content/markdoc-tags/code-walkthrough/step): Define individual procedures of a code walkthrough.
  - [Toggle](/docs/realm/content/markdoc-tags/code-walkthrough/toggle): Add toggles to allow users to switch between variants of walkthrough content.
  - [Input](/docs/realm/content/markdoc-tags/code-walkthrough/input): Add input fields to code walkthroughs.
- [Connect MCP](/docs/realm/content/markdoc-tags/connect-mcp): Add a button that allows users to connect to the MCP (Model Context Protocol) server.
- [Image](/docs/realm/content/markdoc-tags/img): Embed images into your project.
- [Icon](/docs/realm/content/markdoc-tags/icon): Render [Font Awesome](https://fontawesome.com/icons) icons in your project.
- [Inline SVG](/docs/realm/content/markdoc-tags/inline-svg): Render and style SVG images in your project.
- [Login button](/docs/realm/content/markdoc-tags/login-button): Add a login button visible only to unauthenticated users.
- [JSON schema](/docs/realm/content/markdoc-tags/json-schema): Render schemas inside a pre-styled element.
- [JSON Example](/docs/realm/content/markdoc-tags/json-example): Render JSON examples directly in your documentation pages.
- [Markdoc Example](/docs/realm/content/markdoc-tags/markdoc-example): Add examples of Markdoc syntax alongside the rendered element.
- [Numbered list](/docs/realm/content/markdoc-tags/numbered-list): Present step-by-step instructions and timelines as a vertical list with numbered, icon, or dot markers.
- [OpenAPI code sample](/docs/realm/content/markdoc-tags/openapi-code-sample): Render sample code snippets directly in your documentation pages.
- [OpenAPI response sample](/docs/realm/content/markdoc-tags/openapi-response-sample): Render response examples directly in your documentation.
- [Replay OpenAPI](/docs/realm/content/markdoc-tags/replay-openapi): Add the Replay consoe to make API calls directly from a documentation page.
- [Tabs](/docs/realm/content/markdoc-tags/tabs): Organize content variants into switchable tabs.


## Block tags: use block form, not inline form

For block tags (for example, `admonition`, `tabs`, `cards`), keep opening and closing tags on separate lines with content between them.
Single-line inline usage can be parsed as inline content and wrapped in `<p>` tags, which may lead to invalid nesting and hydration issues.

To learn more about Markdoc parsing, see the Markdoc [Inline form](https://markdoc.dev/spec#sec-Inline-form) section.

Recommended:

```md
{% admonition type="success" name="Tip" %}
To perform these steps all at once, run the update script as a `sudo` user.
{% /admonition %}
```

Avoid:

```md
{% admonition type="success" name="Tip" %}To perform these steps all at once, run the update script as a `sudo` user.{% /admonition %}
```

## Resources

- **[Markdoc tag library](/docs/realm/content/markdoc-tags/tag-library)**: Explore Markdoc tags and their rendered examples
- **[Create code walkthrough](/docs/realm/content/markdoc-tags/code-walkthrough/create-code-walkthrough)**: Follow the tutorial to add code walkthroughs to your project