Markdoc tag library

This page contains a comprehensive list of Markdoc tags with links to deeper resources where you can see how to use them.

Admonition

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:

Card and cards

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:

Code snippet

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:

Code walkthrough

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:

Image tag

Use the Image tag to embed images into your content with various customization options.

Additional information and syntax: Image tag

Example image element:

Inline SVG

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:

.

JSON Schema

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:

Markdoc example

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 %}

OpenAPI code sample

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

curl -i -X DELETE \
  -u custom-username:custom-password \
  https://api.fake-museum-example.com/v1/special-events/dad4bce8-f5cb-4078-a211-995864315e39

No content

Partial

Use the Partial tag to render the content from another file.

Additional information and syntax: Partial tag

Replay OpenAPI

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:

Table

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:

Tabs

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: