{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"code-snippet-tag","__idx":0},"children":["Code Snippet Tag ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/learn/markdoc/tags/tag-library#redocly-tag-badge"},"children":[{"$$mdtype":"Tag","name":"TagBadge","attributes":{"badgeType":"Redocly"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The code snippet tag displays code examples in your documentation that are loaded from local files."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"syntax-and-usage","__idx":1},"children":["Syntax and usage"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Code snippet is a self-closing tag, which means it has no child elements. Use attributes to pass the path to the local file and configure how the snippet is displayed."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example element:"]},{"$$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":"p","attributes":{},"children":["Example syntax:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"code-snippet","attributes":{"file":"./code-examples/museum-config.yaml","language":"yaml","title":"museum-redocly.yaml"},"children":[]}],"rawContent":"{% code-snippet\n  file=\"./code-examples/museum-config.yaml\"\n  language=\"yaml\"\n  from=1\n  to=10\n  title=\"museum-redocly.yaml\"\n/%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"attributes","__idx":2},"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":"Option"},"children":["Option"]},{"$$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":"code","attributes":{},"children":["file"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The absolute or relative path to the file with the code snippet."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["from"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Number | String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Use to specify the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["starting point"]}," of your code snippet and ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["include"]}," it in the rendered element. Works with either a line number or a specific string contained in the starting line. Cannot be used with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["after"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["to"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Number | String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Use to specify the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ending point"]}," of your code snippet and ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["include"]}," it in the rendered element. Works with either a line number or a specific string contained in the starting line. Cannot be used with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["before"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["after"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Number | String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Similar to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["from"]}," but ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["excludes the starting point"]}," from the rendered element. Cannot be used with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["from"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["before"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Number | String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Similar to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["to"]}," but ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["excludes the ending point"]}," from the rendered element. Cannot be used with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["to"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["prefix"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Use to add explanatory information at the start of the code snippet. Prepend with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["//"]}," to style as a comment. We recommend including a new line (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\\n"]},") at the end of the prefix."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["language"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the syntax highlighting rules for the code sample used. Syntax highlighting is available for all languages listed on the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://prismjs.com/#supported-languages"},"children":["supported languages page"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["title"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Set the text displayed in the grey header at the top of the code snippet. Commonly used for filenames."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["wrap"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Wraps long lines in the code snippet to avoid or reduce horizontal scroll. Default value is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":3},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"line-numbers-as-selectors","__idx":4},"children":["Line numbers as selectors"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example element:"]},{"$$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":"// Please reserve navbar entries for important use cases \n  items:\n    - page: about-the-museum.md\n      label: About\n    - page: sponsor-the-museum.md\n      label: Benefactors\nfooter:"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example syntax:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"code-snippet","attributes":{"file":"./code-examples/museum-config.yaml","language":"yaml","title":"museum-redocly.yaml"},"children":[]}],"rawContent":"{% code-snippet\n  file=\"./code-examples/museum-config.yaml\"\n  language=\"yaml\"\n  from=11\n  to=16\n  title=\"museum-redocly.yaml\"\n  prefix=\"// Please reserve navbar entries for important use cases \\n\"\n/%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"strings-as-selectors","__idx":5},"children":["Strings as selectors"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example element:"]},{"$$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":"footer:\n  copyrightText: Redocly Museum API\n  items:\n    # Column 1\n    - page: policies/faq.md\n      label: Museum FAQ\n    # Column 2\n    - group: Resources\n      items:\n        - href: https://access.si.edu/museum-professionals\n          label: Smithsonian Resources\n        - href: https://www.aam-us.org/topic/resource-library/\n          label: American Alliance of Museums"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example syntax:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"code-snippet","attributes":{"file":"./code-examples/museum-config.yaml","language":"yaml","title":"museum-redocly.yaml"},"children":[]}],"rawContent":"{% code-snippet\n  file=\"./code-examples/museum-config.yaml\"\n  language=\"yaml\"\n  from=\"footer\"\n  to=\"redirects\"\n  title=\"museum-redocly.yaml\"\n/%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"compare-selection-attributes","__idx":6},"children":["Compare selection attributes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["to"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["from"]}," selectors ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["includes"]}," the starting or ending point in the rendered example while the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["after"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["before"]}," selectors ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["excludes"]}," them."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The examples below use the same source file with different selection attributes."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["To / from example syntax"]}]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"code-snippet","attributes":{"file":"./code-examples/useTabs.ts"},"children":[]}],"rawContent":"{% code-snippet\n  file=\"./code-examples/useTabs.ts\"\n  from=12\n  to=14\n/%}\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["To / from example element"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"./code-examples/useTabs.ts","header":{"controls":{"copy":{}}},"source":"  const setTabRef = useCallback((element: HTMLButtonElement | null, index: number) => {\n    tabRefs.current[index] = element;\n  }, []);"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["After / before example syntax"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"./code-examples/useTabs.ts","header":{"controls":{"copy":{}}},"source":"    tabRefs.current[index] = element;"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["After / before example element"]}]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"code-snippet","attributes":{"file":"./code-examples/useTabs.ts"},"children":[]}],"rawContent":"{% code-snippet\n  file=\"./code-examples/useTabs.ts\"\n  after=12\n  before=14\n/%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":7},"children":["Best practices"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Minimize complexity"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Avoid unnecessary details or context. Simplified code snippets are easier for your readers to understand and apply."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Centralize example files"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Store your example code in a central directory to make them easier to manage, update, and reference from code snippet tags."]}]},"frontmatter":{"seo":{"title":"Code Snippet Markdoc Tag","description":"Display code snippets in your documentation by loading them from local files using the code snippets tag."}},"tagList":["code-snippet","markdoc-example","markdoc-tag-badge","table"],"title":"Code Snippet Markdoc Tag","lastModified":"2025-05-28T16:01:32.000Z"}