{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"step-tag","__idx":0},"children":["Step tag"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["step"]}," tag to define and organize the individual procedures of a walkthrough."," ","A code walkthrough primarily consists of a series of steps with their corresponding code snippets that may be further refined into ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough#chunk-annotations"},"children":["chunks"]},"."]},{"$$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":["id"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["REQUIRED."]}," ","Unique identifier for the code step."," ","Controls the highlighting behavior in a chunk's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["steps"]}," field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["heading"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The header of the code step."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["when"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"#conditions-object"},"children":["Conditions object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Conditions for when the step is visible."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["unless"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"#conditions-object"},"children":["Conditions object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Conditions for when the step ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["is not"]}," be visible."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"conditions-object","__idx":2},"children":["Conditions object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Provide conditions for when to display certain UI elements such as toggles or inputs."," ","You can also add conditions for when to display content such as steps or code sample files when a filter is selected."]},{"$$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":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["{toggle id}"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True if toggle is enabled."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["{filter id}"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string | [string]"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A single or list of filter ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]},"s."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["{input id}"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string | [string]"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A single or list of input ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]},"s."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"chunk-annotations","__idx":3},"children":["Chunk annotations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Chunk annotations (\"chunks\") are single-line comments you add to code example files to control the highlighting behavior of a code-walkthrough."," ","Each chunk has an opening and closing annotation, wrapping sections of code."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The exact comment syntax varies between languages, but the chunk syntax remains the same, as in the following examples:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"HTML","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","data-title":"index.html","header":{"title":"index.html","controls":{"copy":{}}},"source":"<head>\n  <!-- @chunk {\"steps\": [\"add-script\"]} -->\n  <script src=\"script.js\"></script>\n  <!-- @chunk-end -->\n</head>\n","lang":"html"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"JavaScript","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["These comment patterns apply to all JavaScript-based files, such as TypeScript and React."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"script.js","header":{"title":"script.js","controls":{"copy":{}}},"source":"// @chunk {\"steps\": [\"select-dom\"]}\nconst display = document.getElementById('display');\nconst buttons = document.querySelectorAll('.btn');\n// @chunk-end\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"CSS","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"styles.css","header":{"title":"styles.css","controls":{"copy":{}}},"source":"/* @chunk {\"steps\": [\"body-defaults\"]} */\nbody {\n  font-family: Arial, sans-serif;\n  background-color: #f4f4f4;\n}\n/* @chunk-end */\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Python","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"python","data-title":"main.py","header":{"title":"main.py","controls":{"copy":{}}},"source":"# @chunk {\"steps\": [\"app-setup\"]}\nfrom flask import Flask, request, jsonify\nfrom flask_cors import CORS\n\napp = Flask(__name__)\nCORS(app)\nPORT = 5000\n# @chunk-end\n","lang":"python"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Java","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"java","data-title":"Calculator.java","header":{"title":"Calculator.java","controls":{"copy":{}}},"source":"// @chunk {\"steps\": [\"calculator-class\"]}\npublic class CalculatorApplication {\n\n    public static void main(String[] args) {\n        SpringApplication.run(CalculatorApplication.class, args);\n    }\n}\n// @chunk-end\n","lang":"java"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"chunk-attributes","__idx":4},"children":["Chunk attributes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each chunk requires either a ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough/step"},"children":["step ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}]},", or a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["when"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unless"]}," condition with a ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough#filter-object"},"children":["filter"]},", ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough/toggle"},"children":["toggle"]}," or ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough/input"},"children":["input id"]},"."," ","In a code walkthrough, the code wrapped within a set of chunk annotations is highlighted when the corresponding content in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["step"]}," tags is selected."," ","The code is also highlighted when the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["input"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggle"]}," tag condition is met."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can have the same step ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," in two chunks in separate files."," ","In that case, selecting the content in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["step"]}," tags for that ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," highlights the first file from the list."]}]},{"$$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":["steps"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["array"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A list of step ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]},"s that activate the chunk's highlighting."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["when"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"#conditions-object"},"children":["Conditions object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Conditions for when the code snippet wrapped in a chunk can be ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["revealed"]}," with a filter or toggle."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["unless"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"#conditions-object"},"children":["Conditions object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Conditions for when the code snippet wrapped in a chunk can be ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["hidden"]}," with a filter or toggle."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"nested-chunks","__idx":5},"children":["Nested chunks"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can nest chunks inside each other to highlight a larger section along with smaller subsections inside them."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","data-title":"index.html","header":{"title":"index.html","controls":{"copy":{}}},"source":"<!-- @chunk {\"steps\": [\"hello-world-html\", \"create-html-file\"]} -->\n<!DOCTYPE html>\n<html lang=\"en\">\n  <!-- @chunk {\"steps\": [\"html-head\"]} -->\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>Hello World Page</title>\n    <!-- @chunk {\"steps\": [\"link-stylesheet\"]} -->\n    <link rel=\"stylesheet\" href=\"styles.css\">\n    <!-- @chunk-end -->\n  </head>\n  <!-- @chunk-end -->\n  <body>\n    <p>Hello world.</p>\n  </body>\n</html>\n<!-- @chunk-end -->\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Using indentation can help organize your chunks and ensure they're all closed."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"conditional-chunks","__idx":6},"children":["Conditional chunks"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Similar to the step tag, you can define ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["when"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unless"]}," conditions."," ","These conditions control the visibility of code snippets wrapped in chunks in the code panel."," ","Conditions are evaluated against the code walkthrough filters, toggles, and inputs."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example includes content that is revealed when \"npm\" is selected in a \"client\" filter."," ","Different content is displayed when \"pip\" is selected in the same filter:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Markdown file","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdoc","data-title":"code-walkthrough.md","header":{"title":"code-walkthrough.md","controls":{"copy":{}}},"source":"{% toggle id=\"testimonial\" label=\"Add testimonials\" when={ \"filetype\": \"React\" } %}\n{% slot \"description\" %}\nAdd testimonials to your landing page.\n{% /slot %}\n\n{% step id=\"step-2b\" heading=\"Add a testimonial\" %}\nAdd a testimonial section to your page using the highlighted code.\n{% /step %}\n{% /toggle %}\n","lang":"markdoc"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Code file","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","data-title":"landing.page.tsx","header":{"title":"landing.page.tsx","controls":{"copy":{}}},"source":"// @chunk {\"steps\": [\"step-2b\"], \"unless\": {\"testimonial\": false}}\n    <TestimonialsSection>\n        <TestimonialQuote>\n        \"I was able to set up my travel plans in minutes!\"\n        </TestimonialQuote>\n        <p>- Train Travel API user</p>\n    </TestimonialsSection>\n// @chunk-end\n","lang":"typescript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":7},"children":["Examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following examples demonstrate the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["step"]}," tag configurations only."," ","Other content and configuration is abstracted out."," ","Line breaks have been added for readability."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-steps","__idx":8},"children":["Basic steps"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdoc","data-title":"Step tag syntax","header":{"title":"Step tag syntax","controls":{"copy":{}}},"source":"{% code-walkthrough ... %}\n\n  ## Create HTML Structure\n\n  {% step id=\"create-html\" heading=\"Create HTML File\" %}\n    Set up your basic HTML structure in `index.html` with a display and buttons.\n  {% /step %}\n\n  ## Add Calculator Display\n\n  {% step id=\"add-display\" heading=\"Add Calculator Display\" %}\n    In `index.html`, add a `<div>` for the calculator display.\n  {% /step %}\n\n  {% step id=\"add-css\" heading=\"Add CSS Styles\" %}\n    Apply styles in `styles.css` to make your calculator look clean and functional.\n  {% /step %}\n\n{% /code-walkthrough %}\n","lang":"markdoc"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"conditional-steps","__idx":9},"children":["Conditional steps"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdoc","data-title":"When attribute syntax","header":{"title":"When attribute syntax","controls":{"copy":{}}},"source":"{% code-walkthrough ... %}\n  {% step\n    id=\"create-html\"\n    heading=\"Create index.html\"\n    when={ \"client\": [\"HTML\"] } // add toggle, input\n  %}\n    Create `index.html` file with a display and buttons.\n  {% /step %}\n\n  {% step\n    id=\"create-react\"\n    heading=\"Create App.js\"\n    when={ \"client\": \"React\" }\n  %}\n    Create `App.js` file with display logic and buttons.\n  {% /step %}\n{% /code-walkthrough %}\n","lang":"markdoc"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdoc","data-title":"Unless attribute syntax","header":{"title":"Unless attribute syntax","controls":{"copy":{}}},"source":"{% code-walkthrough ... %}\n  {% step\n    id=\"test-client\"\n    heading=\"Test Client Calculations\"\n    unless={ \"server\": [\"Spring (Java)\", \"Python\"] }\n  %}\n    Test calculator in client application by entering calculations and verifying output.\n  {% /step %}\n\n  {% step\n    id=\"test-server\"\n    heading=\"Test Server Calculations\"\n    unless={ \"client\": \"React\" }\n  %}\n    Test the **server-side** calculations by sending requests and verifying responses.\n  {% /step %}\n{% /code-walkthrough %}\n","lang":"markdoc"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":10},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Learn how to use Markdoc to create interactive code guides in ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough/create-code-walkthrough"},"children":["Create code walkthrough"]}," how-to documentation."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Control the highlighting behavior of code examples with ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/code-walkthrough#chunk-annotations"},"children":["chunk annotations"]},"."]}]}]},"frontmatter":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["admonition","configOptionRequirements","partial","tab","table","tabs"],"title":"Step tag","lastModified":"2026-08-20T19:37:30.000Z"}