This page contains a comprehensive list of Markdoc tags with links to deeper resources where you can see how to use them.
Use the Admonition tag to highlight important information. Choose from multiple pre-defined types like info, warning, and success.
Additional information and syntax: Admonition tag
Example admonition element:
This tag is useful for drawing attention.
Use the Cards tag to help users navigate your documentation by grouping information and links in a pre-built UI card. Choose from several pre-defined styles and formats.
Additional information and syntax: Card and cards tag
Example cards element:
Card title
Add content inside the card.
Card title
Use links, Markdown, even other Markdoc tags.
Use the Code Snippet tag to render a code sample from an external file in a configurable code block element.
Additional information and syntax: Code Snippet tag
Example code snippet element:
products:
tickets:
name: Museum Tickets
icon: images/ticket-logo.png
folder: products/tickets/
events:
name: Museum Events
icon: ./images/event-logo.svg
folder: ./products/events
navbar:Use code walkthroughs to interactively explain complex code examples to your users. Code walkthroughs combine steps with explanatory text and downloadable code samples with interactive highlighting. As users select different steps, the corresponding code from the code samples highlights, drawing their focus where you want it.
Additional information and syntax: Code walkthrough tag
Example code walkthrough element:
Use the Image tag to embed images into your content with various customization options.
Additional information and syntax: Image tag
Example image element:
Use the inline SVG tag to render an SVG element inline with your writing.
Additional information and syntax: Inline SVG tag
Example inline SVG element:
.
Use the JSON Schema tag to render an existing or inline schema in a configurable, readable layout.
Additional information and syntax: JSON Schema tag
Example JSON schema element:
Name of the special event.
Location where the special event is held.
Description of the special event.
List of planned dates for the special event.
Price of a ticket for the special event.
Use the Markdoc example tag to display Markdoc syntax simultaneously with the rendered output, separated by introductory text that can be removed or customized.
Additional information and syntax: Markdoc example tag
Example Markdoc example element:
{% admonition type="warning" name="Important" %}
This is an important message about this product.
{% /admonition %}This is an important message about this product.
Use the OpenAPI code sample tag to render a code sample for an API operation from an OpenAPI description.
Additional information and syntax: OpenAPI code sample tag
https://api.fake-museum-example.com/v1/special-events/{eventId}
curl -i -X DELETE \
-u custom-username:custom-password \
https://api.fake-museum-example.com/v1/special-events/dad4bce8-f5cb-4078-a211-995864315e39Use the Partial tag to render the content from another file.
Additional information and syntax: Partial tag
Use the Replay OpenAPI tag to allow users to send live calls to your API.
Additional information and syntax: Replay OpenAPI tag
Example Replay OpenAPI element:
Use the Table tag to create tables using a list-based syntax that allows for easy injection of rich content, like bulleted lists and code samples.
Additional information and syntax: Table tag
Example table element:
| Heading 1 | Heading 2 |
|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 cell 2 |
Use the tabs tag to organize content into a series of tabs that users can switch between.
Additional information and syntax: Tabs tag
Example tabs tag element:
- Tomato (it's both!)
- Blueberry
- Kiwi
- Banana