{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"code-group-tag","__idx":0},"children":["Code group tag"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-group"]}," tag renders a set of code snippets in a tabbed view, allowing users to easily switch between different examples."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"attributes","__idx":1},"children":["Attributes"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Attribute"},"children":["Attribute"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["mode"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The mode of the code group."," ","Can be ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tabs"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dropdown"]},"."," ","Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tabs"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"syntax-and-usage","__idx":2},"children":["Syntax and usage"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To create a code group, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-group"]}," tag and nest code blocks or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-snippet"]}," tags within it."," ","Each code block or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-snippet"]}," represents a tab in the group."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example syntax:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdoc","header":{"controls":{"copy":{}}},"source":"{% code-group %}\n  ```js {% title=\"index.js\" %}\n  import { foo } from \"./foo.js\";\n  console.log(\"Hello, JavaScript!\"); // comment\n  ```\n  ```js {% title=\"foo.js\" %}\n  export const foo = \"foo\";\n  ```\n{% /code-group %}\n","lang":"markdoc"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Result:"]}]},{"$$mdtype":"Tag","name":"CodeGroup","attributes":{"mode":"tabs"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","data-title":"index.js","header":{"title":"index.js","controls":{"copy":{}}},"source":"import { foo } from \"./foo.js\";\nconsole.log(\"Hello, JavaScript!\"); // comment\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","data-title":"foo.js","header":{"title":"foo.js","controls":{"copy":{}}},"source":"export const foo = \"foo\";\n","lang":"js"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"tab-naming","__idx":3},"children":["Tab naming"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The name of each tab is determined by the attributes of the code block or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-snippet"]}," tag in the following order of precedence:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["title"]}," attribute of the code block or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-snippet"]}," tag"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["file"]}," attribute of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-snippet"]}," tag"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lang"]}," attribute of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-snippet"]}," tag or language from the code block is converted to a human-readable name (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["js"]}," becomes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["JavaScript"]},")."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If none of these attributes are provided, the tabs will be named \"Tab 1\", \"Tab 2\", and so on."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mode"]}," attribute is set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dropdown"]},", the name of the tab is determined by the language of the code block or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-snippet"]}," tag."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":4},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tabs","__idx":5},"children":["Tabs"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdoc","header":{"controls":{"copy":{}}},"source":"{% code-group %}\n  ```js {% title=\"index.js\" %}\n  console.log(\"Hello, JavaScript!\"); // comment\n  ```\n  ```python {% title=\"main.py\" %}\n  print(\"Hello, Python!\"); # comment\n  ```\n{% /code-group %}\n","lang":"markdoc"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Result:"]}]},{"$$mdtype":"Tag","name":"CodeGroup","attributes":{"mode":"tabs"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","data-title":"index.js","header":{"title":"index.js","controls":{"copy":{}}},"source":"console.log(\"Hello, JavaScript!\"); // comment\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"python","data-title":"main.py","header":{"title":"main.py","controls":{"copy":{}}},"source":"print(\"Hello, Python!\"); # comment\n","lang":"python"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dropdown-mode","__idx":6},"children":["Dropdown mode"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdoc","header":{"controls":{"copy":{}}},"source":"{% code-group mode=\"dropdown\" %}\n  ```js {% title=\"index.js\" %}\n  console.log(\"Hello, JavaScript!\"); // comment\n  ```\n  ```python {% title=\"main.py\" %}\n  print(\"Hello, Python!\"); # comment\n  ```\n{% /code-group %}\n","lang":"markdoc"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Result:"]}]},{"$$mdtype":"Tag","name":"CodeGroup","attributes":{"mode":"dropdown"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","data-title":"index.js","header":{"title":"index.js","controls":{"copy":{}}},"source":"console.log(\"Hello, JavaScript!\"); // comment\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"python","data-title":"main.py","header":{"title":"main.py","controls":{"copy":{}}},"source":"print(\"Hello, Python!\"); # comment\n","lang":"python"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mix-code-blocks-and-code-snippet-tags","__idx":7},"children":["Mix code blocks and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-snippet"]}," tags"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can mix code blocks and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-snippet"]}," tags in the same ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-group"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example element:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdoc","header":{"controls":{"copy":{}}},"source":"{% code-group %}\n  ```js {% title=\"index.js\" %}\n  console.log(\"Hello, JavaScript!\"); // comment\n  ```\n  {% code-snippet file=\"./code-examples/museum-config.yaml\"\n    language=\"yaml\" from=1 to=10 title=\"museum-redocly.yaml\"\n  /%}\n{% /code-group %}\n","lang":"markdoc"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Result:"]}]},{"$$mdtype":"Tag","name":"CodeGroup","attributes":{"mode":"tabs"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","data-title":"index.js","header":{"title":"index.js","controls":{"copy":{}}},"source":"console.log(\"Hello, JavaScript!\"); // comment\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"./code-examples/museum-config.yaml","language":"yaml","title":"museum-redocly.yaml","header":{"title":"museum-redocly.yaml","controls":{"copy":{}}},"lang":"yaml","source":"products:\n  tickets:\n    name: Museum Tickets\n    icon: images/ticket-logo.png\n    folder: products/tickets/\n  events:\n    name: Museum Events\n    icon: ./images/event-logo.svg\n    folder: ./products/events\nnavbar:"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":8},"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":"https://redocly.com/learn/markdoc"},"children":["Markdoc overview for technical writers"]}]}," - Learn how to use Markdoc in your documentation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags"},"children":["Markdoc tags"]}]}," - See the full list of supported Markdoc tags"]}]}]},"frontmatter":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["code-group","code-snippet","configOptionRequirements","table"],"title":"Code group tag","lastModified":"2026-06-10T08:51:12.000Z"}