{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"markdoc-tags","__idx":0},"children":["Markdoc tags"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use Markdoc tags in your project to add rich formatting, interactivity and reuse capability to your content."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"built-in-tags","__idx":1},"children":["Built-in tags"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following Markdoc tags are included with the official Markdoc package:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/partial"},"children":["Partial"]},": Reuse content between project pages."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/table"},"children":["Table"]},": Create rich tables with less syntax."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/if-else"},"children":["If and else"]},": Add condition that must be fulfilled to render content."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"redocly-tags","__idx":2},"children":["Redocly tags"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following Markdoc tags are custom-made by Redocly:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/accordion"},"children":["Accordion and accordion group"]},": Hide secondary content inside collapsible sections, and combine several of them into a single bordered list."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/admonition"},"children":["Admonition"]},": Add color-coded banners to highlight important information."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/cards"},"children":["Cards"]},": Organize links in a \"card\" or \"tile\" layout."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-snippet"},"children":["Code snippet"]},": Pull fragments code files directly into your documentation pages."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-group"},"children":["Code group"]},": Organize a series of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-snippet"]}," tags into a tabbed layout."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough"},"children":["Code walkthrough"]},": Create interactive, step-by-step instructions for complex code development tasks.",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough/step"},"children":["Step"]},": Define individual procedures of a code walkthrough."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough/toggle"},"children":["Toggle"]},": Add toggles to allow users to switch between variants of walkthrough content."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough/input"},"children":["Input"]},": Add input fields to code walkthroughs."]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/connect-mcp"},"children":["Connect MCP"]},": Add a button that allows users to connect to the MCP (Model Context Protocol) server."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/add-diagram"},"children":["Diagram"]},": Reference external diagram files (Mermaid, PlantUML, Excalidraw)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/img"},"children":["Image"]},": Embed images into your project."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/icon"},"children":["Icon"]},": Render ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://fontawesome.com/icons"},"children":["Font Awesome"]}," icons in your project."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/inline-svg"},"children":["Inline SVG"]},": Render and style SVG images in your project."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/login-button"},"children":["Login button"]},": Add a login button visible only to unauthenticated users."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/json-schema"},"children":["JSON schema"]},": Render schemas inside a pre-styled element."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/json-example"},"children":["JSON Example"]},": Render JSON examples directly in your documentation pages."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/markdoc-example"},"children":["Markdoc Example"]},": Add examples of Markdoc syntax alongside the rendered element."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/numbered-list"},"children":["Numbered list"]},": Present step-by-step instructions and timelines as a vertical list with numbered, icon, or dot markers."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/openapi-code-sample"},"children":["OpenAPI code sample"]},": Render sample code snippets directly in your documentation pages."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/openapi-response-sample"},"children":["OpenAPI response sample"]},": Render response examples directly in your documentation."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/replay-openapi"},"children":["Replay OpenAPI"]},": Add the Replay console to make API calls directly from a documentation page."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/tabs"},"children":["Tabs"]},": Organize content variants into switchable tabs."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"block-tags-use-block-form-not-inline-form","__idx":3},"children":["Block tags: use block form, not inline form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For block tags (for example, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["admonition"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tabs"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<p>"]}," tags, which may lead to invalid nesting and hydration issues."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To learn more about Markdoc parsing, see the Markdoc ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://markdoc.dev/spec#sec-Inline-form"},"children":["Inline form"]}," section."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Recommended:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"md","header":{"controls":{"copy":{}}},"source":"{% admonition type=\"success\" name=\"Tip\" %}\nTo perform these steps all at once, run the update script as a `sudo` user.\n{% /admonition %}\n","lang":"md"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Avoid:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"md","header":{"controls":{"copy":{}}},"source":"{% admonition type=\"success\" name=\"Tip\" %}To perform these steps all at once, run the update script as a `sudo` user.{% /admonition %}\n","lang":"md"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":4},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/tag-library"},"children":["Built-in Markdoc tags"]}]},": Explore Markdoc tags and their rendered examples"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough/create-code-walkthrough"},"children":["Create code walkthrough"]}]},": Follow the tutorial to add code walkthroughs to your project"]}]}]},"frontmatter":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["configOptionRequirements"],"title":"Markdoc tags","lastModified":"2026-10-01T23:00:57.000Z"}