/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", a: "a", h2: "h2", strong: "strong", table: "table", thead: "thead", tr: "tr", th: "th", tbody: "tbody", td: "td", code: "code", pre: "pre", span: "span", h5: "h5", ul: "ul", li: "li", h3: "h3" }, props.components), {Tabs, Tab, Comment, Example, Fixme, Note, Related, Tip, Warning, YouTube} = _components; if (!Comment) _missingMdxReference("Comment", true); if (!Example) _missingMdxReference("Example", true); if (!Fixme) _missingMdxReference("Fixme", true); if (!Note) _missingMdxReference("Note", true); if (!Related) _missingMdxReference("Related", true); if (!Tab) _missingMdxReference("Tab", true); if (!Tabs) _missingMdxReference("Tabs", true); if (!Tip) _missingMdxReference("Tip", true); if (!Warning) _missingMdxReference("Warning", true); if (!YouTube) _missingMdxReference("YouTube", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["The way we render Markdown on our websites is through the use of\n", _jsx(_components.a, { href: "https://mdxjs.com/", children: "MDX" }), ". This allows us to extend Markdown with our own\ntags. These tags are custom React components."] }), "\n", _jsx(_components.p, { children: "Such custom components allow us to put things in Markdown content that would\ntypically require a lot more complexity." }), "\n", _jsx(_components.p, { children: "Below is a list of custom tags that we support in our Markdown-based\ndocumentation, both for freesewing.dev as freesewing.org." }), "\n", _jsx(_components.h2, { id: "comment", children: _jsx(_components.a, { className: "heading-autolink", href: "#comment", children: "Comment" }) }), "\n", _jsxs(_components.p, { children: ["Use a ", _jsx(_components.strong, { children: "Comment" }), " when you want to illustrate something is a personal opinion\nor tip/advice rather than the sort more neutral voice used throughout\nour documentation."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { align: "right", children: "Attribute" }), _jsx(_components.th, { children: "Default" }), _jsx(_components.th, { children: "Description" })] }) }), _jsx(_components.tbody, { children: _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "by" }) }), _jsx(_components.td, {}), _jsx(_components.td, { children: "Name of the commenter" })] }) })] }), "\n", _jsxs(Tabs, { tabs: "example, markdown", children: [_jsx(Tab, { children: _jsx(Comment, { by: "joost", children: "MDX is essentially Markdown + (React) components" }) }), _jsx(Tab, { children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-markdown", children: [_jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Comment" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "by" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"joost\"" }), ">"] }) }), "MDX is essentially Markdown + (React) components", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n"] }) }) })] }), "\n", _jsx(_components.h2, { id: "example", children: _jsx(_components.a, { className: "heading-autolink", href: "#example", children: "Example" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.strong, { children: "Example" }), " tag allows you to embed a FreeSewing code example and have it rendered in the browser.\nSpecifically, you should write a ", _jsx(_components.a, { href: "/reference/api/part/draft", children: "draft method" }), " which will then be rendered."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { align: "right", children: "Attribute" }), _jsx(_components.th, { children: "Default" }), _jsx(_components.th, { children: "Description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "caption" }) }), _jsx(_components.td, {}), _jsx(_components.td, { children: "The caption to go under the example" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "tutorial" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsx(_components.td, { children: "Set this to show the Code tab first, rather than the default Preview tab. Also, additional options are made available for use in pattern examples" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "previewFirst" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsxs(_components.td, { children: ["Set this to always show the Preview tab first, regardless of the value of ", _jsx(_components.code, { children: "tutorial" })] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "withHead" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsx(_components.td, { children: "Set this to include a head measurement (for tutorial pattern examples)" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "paperless" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsx(_components.td, { children: "Set this to enable paperless mode" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "settings" }) }), _jsx(_components.td, {}), _jsx(_components.td, { children: "A YAML string of settings to take into account" })] })] })] }), "\n", _jsxs(Tabs, { tabs: "example, markdown", children: [_jsx(Tab, { children: _jsx(Example, { caption: "Example of the Path.curve() method", children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: ["({ ", _jsx(_components.span, { className: "hljs-title class_", children: "Point" }), ", points, ", _jsx(_components.span, { className: "hljs-title class_", children: "Path" }), ", paths, part }) => {\n\n points.", _jsx(_components.span, { className: "hljs-property", children: "from" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Point" }), "(", _jsx(_components.span, { className: "hljs-number", children: "10" }), ", ", _jsx(_components.span, { className: "hljs-number", children: "20" }), ")\n points.", _jsx(_components.span, { className: "hljs-property", children: "cp1" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Point" }), "(", _jsx(_components.span, { className: "hljs-number", children: "40" }), ", ", _jsx(_components.span, { className: "hljs-number", children: "0" }), ")\n points.", _jsx(_components.span, { className: "hljs-property", children: "cp2" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Point" }), "(", _jsx(_components.span, { className: "hljs-number", children: "60" }), ", ", _jsx(_components.span, { className: "hljs-number", children: "40" }), ")\n points.", _jsx(_components.span, { className: "hljs-property", children: "to" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Point" }), "(", _jsx(_components.span, { className: "hljs-number", children: "90" }), ", ", _jsx(_components.span, { className: "hljs-number", children: "20" }), ")\n \n paths.", _jsx(_components.span, { className: "hljs-property", children: "line" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Path" }), "()\n .", _jsx(_components.span, { className: "hljs-title function_", children: "move" }), "(points.", _jsx(_components.span, { className: "hljs-property", children: "from" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "curve" }), "(points.", _jsx(_components.span, { className: "hljs-property", children: "cp1" }), ", points.", _jsx(_components.span, { className: "hljs-property", children: "cp2" }), ", points.", _jsx(_components.span, { className: "hljs-property", children: "to" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "setText" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"Path.curve()\"" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "\"text-sm center fill-note\"" }), ")\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " part\n}\n"] }) }) }) }), _jsx(Tab, { children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-markdown", children: [_jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Example" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "caption" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Example of the Path.curve() method\"" }), ">"] }) }), "\n", _jsx(_components.span, { className: "hljs-code", children: "```js\n({ Point, points, Path, paths, part }) => {\n\n points.from = new Point(10, 20)\n points.cp1 = new Point(40, 0)\n points.cp2 = new Point(60, 40)\n points.to = new Point(90, 20)\n \n paths.line = new Path()\n .move(points.from)\n .curve(points.cp1, points.cp2, points.to)\n .setText(\"Path.curve()\", \"text-sm center fill-note\")\n\n return part\n}\n```" }), "\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n"] }) }) })] }), "\n", _jsx(_components.h2, { id: "fixme", children: _jsx(_components.a, { className: "heading-autolink", href: "#fixme", children: "Fixme" }) }), "\n", _jsxs(_components.p, { children: ["Use ", _jsx(_components.strong, { children: "Fixme" }), " to indicate something needs attention/work but you don’t have time\nor can’t fix it now."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { align: "right", children: "Attribute" }), _jsx(_components.th, { children: "Default" }), _jsx(_components.th, { children: "Description" })] }) }), _jsx(_components.tbody, { children: _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "compact" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsx(_components.td, { children: "Renders compact variant" })] }) })] }), "\n", _jsxs(Tabs, { tabs: "example, markdown", children: [_jsxs(Tab, { children: [_jsxs(Fixme, { children: [_jsx(_components.h5, { id: "todo", children: _jsx(_components.a, { className: "heading-autolink", href: "#todo", children: "ToDo" }) }), _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Include link to roadmap" }), "\n", _jsx(_components.li, { children: "Fix style for text outside paragraphs" }), "\n"] })] }), _jsx(Fixme, { compact: true, children: "Show compact example" })] }), _jsx(Tab, { children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-markdown", children: [_jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Fixme" }), ">"] }) }), "\n", _jsx(_components.span, { className: "hljs-section", children: "##### ToDo" }), "\n", _jsx(_components.span, { className: "hljs-bullet", children: "-" }), " Include link to roadmap\n", _jsx(_components.span, { className: "hljs-bullet", children: "-" }), " Fix style for text outside paragraphs\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Fixme" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "compact" }), ">"] }) }), "Show compact example", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n"] }) }) })] }), "\n", _jsx(_components.h2, { id: "note", children: _jsx(_components.a, { className: "heading-autolink", href: "#note", children: "Note" }) }), "\n", _jsxs(_components.p, { children: ["Use ", _jsx(_components.strong, { children: "Note" }), " to add something that stands out to draw attention."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { align: "right", children: "Attribute" }), _jsx(_components.th, { children: "Default" }), _jsx(_components.th, { children: "Description" })] }) }), _jsx(_components.tbody, { children: _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "compact" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsx(_components.td, { children: "Renders compact variant" })] }) })] }), "\n", _jsxs(Tabs, { tabs: "example, markdown", children: [_jsxs(Tab, { children: [_jsxs(Note, { children: [_jsx(_components.h5, { id: "also-available-in-black", children: _jsx(_components.a, { className: "heading-autolink", href: "#also-available-in-black", children: "Also available in black" }) }), _jsx(_components.p, { children: "This style also comes in black, which we can all agree is the superior color" })] }), _jsx(Note, { compact: true, children: "And in pink" })] }), _jsx(Tab, { children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-markdown", children: [_jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Note" }), ">"] }) }), "\n", _jsx(_components.span, { className: "hljs-section", children: "##### Also available in black" }), "\nThis style also comes in black, which we can all agree is the superior color\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Note" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "compact" }), ">"] }) }), "And in pink", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n"] }) }) })] }), "\n", _jsx(_components.h2, { id: "readmore", children: _jsx(_components.a, { className: "heading-autolink", href: "#readmore", children: "ReadMore" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.strong, { children: "ReadMore" }), " tag allows you to insert a list of child-pages.\nThe list is automatically generated from the pages in the subdirectories\nof the documentation page’s directory.\nThis tag is typically used on overview pages, such as our ", _jsx(_components.a, { href: "/guides/markdown", children: "Markdown guide" }), " page."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { align: "right", children: "Attribute" }), _jsx(_components.th, { children: "Default" }), _jsx(_components.th, { children: "Description" })] }) }), _jsx(_components.tbody, { children: _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "recurse" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsx(_components.td, { children: "Include all child-pages and sub-child-pages in the entire directory tree" })] }) })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-markdown", children: [_jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ReadMore" }), " />"] }) }), "\n"] }) }), "\n", _jsx(_components.p, { children: "(It won’t show anything on this page, since this page has no child-pages.)" }), "\n", _jsx(_components.h2, { id: "related", children: _jsx(_components.a, { className: "heading-autolink", href: "#related", children: "Related" }) }), "\n", _jsxs(_components.p, { children: ["Use ", _jsx(_components.strong, { children: "Related" }), " to add something that is relevant to the current topic."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { align: "right", children: "Attribute" }), _jsx(_components.th, { children: "Default" }), _jsx(_components.th, { children: "Description" })] }) }), _jsx(_components.tbody, { children: _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "compact" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsx(_components.td, { children: "Renders compact variant" })] }) })] }), "\n", _jsxs(Tabs, { tabs: "example, markdown", children: [_jsxs(Tab, { children: [_jsx(Related, { children: _jsxs(_components.p, { children: ["This snippet is provided by ", _jsx(_components.a, { href: "/reference/plugins/buttons", children: "the buttons plugin" })] }) }), _jsxs(Related, { compact: true, children: ["See ", _jsx(_components.a, { href: "/reference/snippets", children: "snippets" })] })] }), _jsx(Tab, { children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-markdown", children: [_jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Related" }), ">"] }) }), "\n This snippet is provided by [", _jsx(_components.span, { className: "hljs-string", children: "the buttons plugin" }), "](", _jsx(_components.span, { className: "hljs-link", children: "/reference/plugins/buttons" }), ")\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Related" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "compact" }), ">"] }) }), "See [", _jsx(_components.span, { className: "hljs-string", children: "snippets" }), "](", _jsx(_components.span, { className: "hljs-link", children: "/reference/snippets" }), ")", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n"] }) }) })] }), "\n", _jsx(_components.h2, { id: "tip", children: _jsx(_components.a, { className: "heading-autolink", href: "#tip", children: "Tip" }) }), "\n", _jsxs(_components.p, { children: ["Use ", _jsx(_components.strong, { children: "Tip" }), " for, you know, tips."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { align: "right", children: "Attribute" }), _jsx(_components.th, { children: "Default" }), _jsx(_components.th, { children: "Description" })] }) }), _jsx(_components.tbody, { children: _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "compact" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsx(_components.td, { children: "Renders compact variant" })] }) })] }), "\n", _jsxs(Tabs, { tabs: "example, markdown", children: [_jsxs(Tab, { children: [_jsx(Tip, { children: _jsx(_components.p, { children: "The notches on the shoulder and sleeve parts are used to help with\nalignment when attaching the sleeve." }) }), _jsx(Tip, { compact: true, children: "Align the notches so they match" })] }), _jsx(Tab, { children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-markdown", children: [_jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Tip" }), ">"] }) }), "\n The notches on the shoulder and sleeve parts are used to help with\n alignment when attaching the sleeve.\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Tip" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "compact" }), ">"] }) }), "Align the notches so they match", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n"] }) }) })] }), "\n", _jsx(_components.h2, { id: "warning", children: _jsx(_components.a, { className: "heading-autolink", href: "#warning", children: "Warning" }) }), "\n", _jsxs(_components.p, { children: ["Use ", _jsx(_components.strong, { children: "Warning" }), " when you want to warn the reader of potential danger or unintended side-effects."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { align: "right", children: "Attribute" }), _jsx(_components.th, { children: "Default" }), _jsx(_components.th, { children: "Description" })] }) }), _jsx(_components.tbody, { children: _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "compact" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsx(_components.td, { children: "Renders compact variant" })] }) })] }), "\n", _jsxs(Tabs, { tabs: "example, markdown", children: [_jsxs(Tab, { children: [_jsxs(Warning, { children: [_jsx(_components.h5, { id: "please-make-a-backup", children: _jsx(_components.a, { className: "heading-autolink", href: "#please-make-a-backup", children: "Please make a backup" }) }), _jsx(_components.p, { children: "Following these instructions will remove all your data" })] }), _jsx(Warning, { compact: true, children: "Take it slow" })] }), _jsx(Tab, { children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-markdown", children: [_jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Warning" }), ">"] }) }), "\n ##### Please make a backup\n Following these instructions will remove all your data\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Warning" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "compact" }), ">"] }) }), "Take it slow", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: [""] }) }), "\n"] }) }) })] }), "\n", _jsx(_components.h2, { id: "youtube", children: _jsx(_components.a, { className: "heading-autolink", href: "#youtube", children: "YouTube" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.strong, { children: "YouTube" }), " tag will embed YouTube videos or YouTube playlists responsively."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { align: "right", children: "Attribute" }), _jsx(_components.th, { children: "Default" }), _jsx(_components.th, { children: "Description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "id" }) }), _jsx(_components.td, {}), _jsx(_components.td, { children: "ID of the YouTube video or playlist" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { align: "right", children: _jsx(_components.code, { children: "playlist" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "false" }) }), _jsx(_components.td, { children: "Set this when embedding a playlist" })] })] })] }), "\n", _jsxs(Tabs, { tabs: "example, markdown", children: [_jsxs(Tab, { children: [_jsx(_components.h3, { id: "video", children: _jsx(_components.a, { className: "heading-autolink", href: "#video", children: "Video" }) }), _jsx(YouTube, { id: "Rz6ShSftDlI" }), _jsx(_components.h3, { id: "playlist", children: _jsx(_components.a, { className: "heading-autolink", href: "#playlist", children: "Playlist" }) }), _jsx(YouTube, { id: "PL1gv5yv3DoZOFSXz7yydeV1H8m6pfwstn", playlist: true })] }), _jsx(Tab, { children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-markdown", children: [_jsx(_components.span, { className: "hljs-section", children: "### Video" }), "\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "YouTube" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "'Rz6ShSftDlI'" }), " />"] }) }), "\n", _jsx(_components.span, { className: "hljs-section", children: "### Playlist" }), "\n", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "YouTube" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "'PL1gv5yv3DoZOFSXz7yydeV1H8m6pfwstn'" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "playlist" }), " />"] }) }), "\n"] }) }) })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Custom tags

Found a mistake?