Hello {project}!
;\n\nrender(Hello {project}!
\n);\n\nrender(\n"})," tag, ",(0,s.jsx)(n.code,{children:""})," tag, or ",(0,s.jsx)(n.code,{children:""})," component."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"\n Input: 1 2 3 4{'\\n'}\n Output: \"366300745\"{'\\n'}\n\n"})}),"\n",(0,s.jsx)(o.Z,{children:(0,s.jsxs)("pre",{children:[(0,s.jsx)("b",{children:"Input: "}),"1 2 3 4\n",(0,s.jsx)("b",{children:"Output: "}),'"366300745"\n']})}),"\n",(0,s.jsx)(n.admonition,{title:"MDX is whitespace insensitive",type:"warning",children:(0,s.jsxs)(n.p,{children:["MDX is in line with JSX behavior: line break characters, even when inside ",(0,s.jsx)(n.code,{children:""}),", are turned into spaces. You have to explicitly write the new line character for it to be printed out."]})}),"\n",(0,s.jsx)(n.admonition,{type:"warning",children:(0,s.jsx)(n.p,{children:"Syntax highlighting only works on plain strings. Docusaurus will not attempt to parse code block content containing JSX children."})}),"\n",(0,s.jsx)(n.h2,{id:"multi-language-support-code-blocks",children:"Multi-language support code blocks"}),"\n",(0,s.jsx)(n.p,{children:"With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switch between them using a tabs component."}),"\n",(0,s.jsxs)(n.p,{children:["Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a general-purpose ",(0,s.jsx)(n.a,{href:"/docs/markdown-features/tabs",children:(0,s.jsx)(n.code,{children:""})})," component in the classic theme so that you can use it for other non-code scenarios as well."]}),"\n",(0,s.jsxs)(n.p,{children:["The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block are ",(0,s.jsx)(n.strong,{children:"intentional"}),". This is a ",(0,s.jsx)(n.a,{href:"/docs/markdown-features/react#markdown-and-jsx-interoperability",children:"current limitation of MDX"}),": you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:'import Tabs from \'@theme/Tabs\';\nimport TabItem from \'@theme/TabItem\';\n\n\n\n\n```js\nfunction helloWorld() {\n console.log(\'Hello, world!\');\n}\n```\n\n \n\n\n```py\ndef hello_world():\n print("Hello, world!")\n```\n\n \n\n\n```java\nclass HelloWorld {\n public static void main(String args[]) {\n System.out.println("Hello, World");\n }\n}\n```\n\n \n \n'})}),"\n",(0,s.jsx)(n.p,{children:"And you will get the following:"}),"\n",(0,s.jsx)(o.Z,{children:(0,s.jsxs)(a.Z,{children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"function helloWorld() {\n console.log('Hello, world!');\n}\n"})})}),(0,s.jsx)(l.Z,{value:"py",label:"Python",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-py",children:'def hello_world():\n print("Hello, world!")\n'})})}),(0,s.jsx)(l.Z,{value:"java",label:"Java",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-java",children:'class HelloWorld {\n public static void main(String args[]) {\n System.out.println("Hello, World");\n }\n}\n'})})})]})}),"\n",(0,s.jsxs)(n.p,{children:["If you have multiple of these multi-language code tabs, and you want to sync the selection across the tab instances, refer to the ",(0,s.jsx)(n.a,{href:"/docs/markdown-features/tabs#syncing-tab-choices",children:"Syncing tab choices section"}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"npm2yarn-remark-plugin",children:"Docusaurus npm2yarn remark plugin"}),"\n",(0,s.jsx)(n.p,{children:"Displaying CLI commands in both npm and Yarn is a very common need, for example:"}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,s.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"bun add @docusaurus/remark-plugin-npm2yarn\n"})})})]}),"\n",(0,s.jsxs)(n.p,{children:["Docusaurus provides such a utility out of the box, freeing you from using the ",(0,s.jsx)(n.code,{children:"Tabs"})," component every time. To enable this feature, first install the ",(0,s.jsx)(n.code,{children:"@docusaurus/remark-plugin-npm2yarn"})," package as above, and then in ",(0,s.jsx)(n.code,{children:"docusaurus.config.js"}),", for the plugins where you need this feature (doc, blog, pages, etc.), register it in the ",(0,s.jsx)(n.code,{children:"remarkPlugins"})," option. (See ",(0,s.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-content-docs#ex-config",children:"Docs configuration"})," for more details on configuration format)"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n presets: [\n [\n '@docusaurus/preset-classic',\n {\n docs: {\n // highlight-start\n remarkPlugins: [\n [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],\n ],\n // highlight-end\n },\n pages: {\n // highlight-next-line\n remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],\n },\n blog: {\n // highlight-start\n remarkPlugins: [\n [\n require('@docusaurus/remark-plugin-npm2yarn'),\n {converters: ['pnpm']},\n ],\n ],\n // highlight-end\n // ...\n },\n },\n ],\n ],\n};\n"})}),"\n",(0,s.jsxs)(n.p,{children:["And then use it by adding the ",(0,s.jsx)(n.code,{children:"npm2yarn"})," key to the code block:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-md",children:"```bash npm2yarn\nnpm install @docusaurus/remark-plugin-npm2yarn\n```\n"})}),"\n",(0,s.jsx)(n.h4,{id:"npm2yarn-remark-plugin-configuration",children:"Configuration"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Option"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"sync"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:"Whether to sync the selected converter across all code blocks."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"converters"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"array"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.code,{children:"'yarn'"}),", ",(0,s.jsx)(n.code,{children:"'pnpm'"})]}),(0,s.jsx)(n.td,{children:"The list of converters to use. The order of the converters is important, as the first converter will be used as the default choice."})]})]})]}),"\n",(0,s.jsx)(n.h2,{id:"usage-in-jsx",children:"Usage in JSX"}),"\n",(0,s.jsxs)(n.p,{children:["Outside of Markdown, you can use the ",(0,s.jsx)(n.code,{children:"@theme/CodeBlock"})," component to get the same output."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:'import CodeBlock from \'@theme/CodeBlock\';\n\nexport default function MyReactPage() {\n return (\n \n {/* highlight-start */}\n \n {`function HelloCodeTitle(props) {\n return Hello, {props.name}
;\n}`}\n \n {/* highlight-end */}\n \n );\n}\n'})}),"\n",(0,s.jsx)(o.Z,{children:(0,s.jsx)(c.Z,{language:"jsx",title:"/src/components/HelloCodeTitle.js",showLineNumbers:!0,children:`function HelloCodeTitle(props) {
return Hello, {props.name}
;
}`})}),"\n",(0,s.jsxs)(n.p,{children:["The props accepted are ",(0,s.jsx)(n.code,{children:"language"}),", ",(0,s.jsx)(n.code,{children:"title"})," and ",(0,s.jsx)(n.code,{children:"showLineNumbers"}),", in the same way as you write Markdown code blocks."]}),"\n",(0,s.jsxs)(n.p,{children:["Although discouraged, you can also pass in a ",(0,s.jsx)(n.code,{children:"metastring"})," prop like ",(0,s.jsx)(n.code,{children:"metastring='{1-2} title=\"/src/components/HelloCodeTitle.js\" showLineNumbers'"}),", which is how Markdown code blocks are handled under the hood. However, we recommend you ",(0,s.jsx)(n.a,{href:"#highlighting-with-comments",children:"use comments for highlighting lines"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["As ",(0,s.jsx)(n.a,{href:"#using-jsx-markup",children:"previously stated"}),", syntax highlighting is only applied when the children is a simple string."]})]})}function p(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},5343:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893);t(67294);var s=t(90496);function i(e){let{className:n,...t}=e;return(0,r.jsx)("button",{type:"button",...t,className:(0,s.Z)("clean-btn",n)})}},2556:function(e,n,t){t.d(n,{Z:()=>g});var r=t(85893),s=t(67294),i=t(90496),a=t(44771),l=t(77827),o=t(88568),c=t(5343),d=t(31660),h=t(87545),u=t(16688);function g(e){let{className:n}=e,{copyCode:t,isCopied:g}=function(){let{metadata:{code:e}}=(0,o.LS)(),[n,t]=(0,s.useState)(!1),r=(0,s.useRef)(void 0),i=(0,s.useCallback)(()=>{(0,a.Z)(e),t(!0),r.current=window.setTimeout(()=>{t(!1)},1e3)},[e]);return(0,s.useEffect)(()=>()=>window.clearTimeout(r.current),[]),{copyCode:i,isCopied:n}}();return(0,r.jsx)(c.Z,{"aria-label":g?(0,l.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,l.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,l.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,i.Z)(n,u.Z.copyButton,g&&u.Z.copyButtonCopied),onClick:t,children:(0,r.jsxs)("span",{className:u.Z.copyButtonIcons,"aria-hidden":"true",children:[(0,r.jsx)(d.Z,{className:u.Z.copyButtonIcon}),(0,r.jsx)(h.Z,{className:u.Z.copyButtonSuccessIcon})]})})}},93757:function(e,n,t){t.d(n,{Z:()=>d});var r=t(85893);t(67294);var s=t(90496),i=t(77827),a=t(88568),l=t(5343),o=t(67379),c=t(61475);function d(e){let{className:n}=e,{wordWrap:t}=(0,a.LS)();if(!(t.isEnabled||t.isCodeScrollable))return!1;let d=(0,i.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,r.jsx)(l.Z,{onClick:()=>t.toggle(),className:(0,s.Z)(n,t.isEnabled&&c.Z.wordWrapButtonEnabled),"aria-label":d,title:d,children:(0,r.jsx)(o.Z,{className:c.Z.wordWrapButtonIcon,"aria-hidden":"true"})})}},37457:function(e,n,t){t.d(n,{Z:()=>c});var r=t(85893);t(67294);var s=t(90496),i=t(56497),a=t(2556),l=t(93757),o=t(62081);function c(e){let{className:n}=e;return(0,r.jsx)(i.Z,{children:()=>(0,r.jsxs)("div",{className:(0,s.Z)(n,o.Z.buttonGroup),children:[(0,r.jsx)(l.Z,{}),(0,r.jsx)(a.Z,{})]})})}},62302:function(e,n,t){t.d(n,{Z:()=>c});var r=t(85893);t(67294);var s=t(90496),i=t(10099),a=t(55951),l=t(88568),o=t(58683);function c(e){let{as:n,...t}=e,c=(0,i.p)(),d=(0,l.QC)(c);return(0,r.jsx)(n,{...t,style:d,className:(0,s.Z)(t.className,o.Z.codeBlockContainer,a.k.common.codeBlock)})}},93002:function(e,n,t){t.d(n,{Z:()=>l});var r=t(85893);t(67294);var s=t(90496),i=t(62302),a=t(18314);function l(e){let{children:n,className:t}=e;return(0,r.jsx)(i.Z,{as:"pre",tabIndex:0,className:(0,s.Z)(a.Z.codeBlockStandalone,"thin-scrollbar",t),children:(0,r.jsx)("code",{className:a.Z.codeBlockLines,children:n})})}},97061:function(e,n,t){t.d(n,{Z:()=>o});var r=t(85893);t(67294);var s=t(26378),i=t(88568),a=t(63461),l=t(65802);function o(e){let n=function(e){let{prism:n}=(0,s.L)();return(0,i.MA)({code:e.children,className:e.className,metastring:e.metastring,magicComments:n.magicComments,defaultLanguage:n.defaultLanguage,language:e.language,title:e.title,showLineNumbers:e.showLineNumbers})}(e),t=(0,a.F)();return(0,r.jsx)(i.EF,{metadata:n,wordWrap:t,children:(0,r.jsx)(l.Z,{})})}},26965:function(e,n,t){t.d(n,{Z:()=>g});var r=t(85893),s=t(67294),i=t(90496),a=t(88568),l=t(10099),o=t(7316),c=t(32028),d=t(18314);let h=s.forwardRef((e,n)=>(0,r.jsx)("pre",{ref:n,tabIndex:0,...e,className:(0,i.Z)(e.className,d.Z.codeBlock,"thin-scrollbar")}));function u(e){let{metadata:n}=(0,a.LS)();return(0,r.jsx)("code",{...e,className:(0,i.Z)(e.className,d.Z.codeBlockLines,void 0!==n.lineNumbersStart&&d.Z.codeBlockLinesWithNumbering),style:{...e.style,counterReset:void 0===n.lineNumbersStart?void 0:`line-count ${n.lineNumbersStart-1}`}})}function g(e){let{className:n}=e,{metadata:t,wordWrap:s}=(0,a.LS)(),d=(0,l.p)(),{code:g,language:m,lineNumbersStart:p,lineClassNames:x}=t;return(0,r.jsx)(o.y$,{theme:d,code:g,language:m,children:e=>{let{className:t,style:a,tokens:l,getLineProps:o,getTokenProps:d}=e;return(0,r.jsx)(h,{ref:s.codeBlockRef,className:(0,i.Z)(n,t),style:a,children:(0,r.jsx)(u,{children:l.map((e,n)=>(0,r.jsx)(c.Z,{line:e,getLineProps:o,getTokenProps:d,classNames:x[n],showLineNumbers:void 0!==p},n))})})}})}},65802:function(e,n,t){t.d(n,{Z:()=>h});var r=t(85893);t(67294);var s=t(90496),i=t(88568),a=t(62302),l=t(923),o=t(26965),c=t(37457),d=t(13112);function h(e){let{className:n}=e,{metadata:t}=(0,i.LS)();return(0,r.jsxs)(a.Z,{as:"div",className:(0,s.Z)(n,t.className),children:[t.title&&(0,r.jsx)("div",{className:d.Z.codeBlockTitle,children:(0,r.jsx)(l.Z,{children:t.title})}),(0,r.jsxs)("div",{className:d.Z.codeBlockContent,children:[(0,r.jsx)(o.Z,{}),(0,r.jsx)(c.Z,{})]})]})}},76458:function(e,n,t){t.d(n,{Z:()=>s});var r=t(85893);function s(e){let{line:n,token:t,...s}=e;return(0,r.jsx)("span",{...s})}t(67294)},32028:function(e,n,t){t.d(n,{Z:()=>l});var r=t(85893);t(67294);var s=t(90496),i=t(76458),a=t(61562);function l(e){let{line:n,classNames:t,showLineNumbers:l,getLineProps:o,getTokenProps:c}=e,d=function(e){let n=1===e.length&&"\n"===e[0].content?e[0]:void 0;return n?[{...n,content:""}]:e}(n),h=o({line:d,className:(0,s.Z)(t,l&&a.Z.codeLine)}),u=d.map((e,n)=>{let t=c({token:e});return(0,r.jsx)(i.Z,{...t,line:d,token:e,children:t.children},n)});return(0,r.jsxs)("span",{...h,children:[l?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:a.Z.codeLineNumber}),(0,r.jsx)("span",{className:a.Z.codeLineContent,children:u})]}):u,(0,r.jsx)("br",{})]})}},923:function(e,n,t){t.d(n,{Z:()=>r});function r(e){let{children:n}=e;return n}},8110:function(e,n,t){t.d(n,{Z:()=>o});var r=t(85893),s=t(67294),i=t(71607),a=t(93002),l=t(97061);function o(e){let{children:n,...t}=e,o=(0,i.Z)(),c=s.Children.toArray(n).some(e=>(0,s.isValidElement)(e))?n:Array.isArray(n)?n.join(""):n,d="string"==typeof c?l.Z:a.Z;return(0,r.jsx)(d,{...t,children:c},String(o))}},31660:function(e,n,t){t.d(n,{Z:()=>s});var r=t(85893);function s(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}t(67294)},87545:function(e,n,t){t.d(n,{Z:()=>s});var r=t(85893);function s(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}t(67294)},67379:function(e,n,t){t.d(n,{Z:()=>s});var r=t(85893);function s(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}t(67294)},54636:function(e,n,t){t.d(n,{Z:()=>a});var r=t(85893);t(67294);var s=t(90496),i=t(55701);function a(e){let{children:n,hidden:t,className:a}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,s.Z)(i.Z.tabItem,a),hidden:t,children:n})}},4575:function(e,n,t){t.d(n,{Z:()=>g});var r=t(85893),s=t(67294),i=t(90496),a=t(54947),l=t(30623),o=t(71607),c=t(93195);function d(e){let{className:n,block:t,selectedValue:s,selectValue:l,tabValues:o}=e,d=[],{blockElementScrollPositionUntilNextRender:h}=(0,a.o5)(),u=e=>{let n=e.currentTarget,t=o[d.indexOf(n)].value;t!==s&&(h(n),l(t))},g=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let t=d.indexOf(e.currentTarget)+1;n=d[t]??d[0];break}case"ArrowLeft":{let t=d.indexOf(e.currentTarget)-1;n=d[t]??d[d.length-1]}}n?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":t},n),children:o.map(e=>{let{value:n,label:t,attributes:a}=e;return(0,r.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{d.push(e)},onKeyDown:g,onClick:u,...a,className:(0,i.Z)("tabs__item",c.Z.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)})})}function h(e){let{lazy:n,children:t,selectedValue:a}=e,l=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){let e=l.find(e=>e.props.value===a);return e?(0,s.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:l.map((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a}))})}function u(e){let n=(0,l.Y)(e);return(0,r.jsxs)("div",{className:(0,i.Z)("tabs-container",c.Z.tabList),children:[(0,r.jsx)(d,{...n,...e}),(0,r.jsx)(h,{...n,...e})]})}function g(e){let n=(0,o.Z)();return(0,r.jsx)(u,{...e,children:(0,l.h)(e.children)},String(n))}},63461:function(e,n,t){t.d(n,{F:()=>i});var r=t(67294),s=t(9219);function i(){let[e,n]=(0,r.useState)(!1),[t,i]=(0,r.useState)(!1),a=(0,r.useRef)(null),l=(0,r.useCallback)(()=>{let t=a.current.querySelector("code");e?t.removeAttribute("style"):(t.style.whiteSpace="pre-wrap",t.style.overflowWrap="anywhere"),n(e=>!e)},[a,e]),o=(0,r.useCallback)(()=>{let{scrollWidth:e,clientWidth:n}=a.current;i(e>n||a.current.querySelector("code").hasAttribute("style"))},[a]),[c,d]=(0,r.useState)(),h=(0,r.useCallback)(()=>{d(a.current?.closest("[role=tabpanel][hidden]"))},[a,d]);return(0,r.useEffect)(()=>{h()},[h]),(0,s.I)(c,e=>{e.forEach(e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(o(),h())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1}),(0,r.useEffect)(()=>{o()},[e,o]),(0,r.useEffect)(()=>(window.addEventListener("resize",o,{passive:!0}),()=>{window.removeEventListener("resize",o)}),[o]),{codeBlockRef:a,isEnabled:e,isCodeScrollable:t,toggle:l}}},9219:function(e,n,t){t.d(n,{I:()=>a});var r=t(67294),s=t(50923);let i={attributes:!0,characterData:!0,childList:!0,subtree:!0};function a(e,n){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:i,a=(0,s.zX)(n),l=(0,s.Ql)(t);(0,r.useEffect)(()=>{let n=new MutationObserver(a);return e&&n.observe(e,l),()=>n.disconnect()},[e,a,l])}},10099:function(e,n,t){t.d(n,{p:()=>i});var r=t(45245),s=t(26378);function i(){let{prism:e}=(0,s.L)(),{colorMode:n}=(0,r.I)(),t=e.theme,i=e.darkTheme||t;return"dark"===n?i:t}},88568:function(e,n,t){t.d(n,{EF:()=>f,LS:()=>b,MA:()=>p,QC:()=>x});var r=t(85893),s=t(67294),i=t(90496),a=t(6324),l=t.n(a),o=t(50923);let c=/title=(?["'])(?.*?)\1/,d=/\{(?<range>[\d,-]+)\}/,h={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},u={...h,lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},g=Object.keys(h);function m(e,n){let t=e.map(e=>{let{start:t,end:r}=u[e];return`(?:${t}\\s*(${n.flatMap(e=>[e.line,e.block?.start,e.block?.end].filter(Boolean)).join("|")})\\s*${r})`}).join("|");return RegExp(`^\\s*(?:${t})\\s*$`)}function p(e){var n,t,r;let s=(t=(n={language:e.language,defaultLanguage:e.defaultLanguage,className:e.className}).language??function(e){if(!e)return;let n=e.split(" ").find(e=>e.startsWith("language-"));return n?.replace(/language-/,"")}(n.className)??n.defaultLanguage,t?.toLowerCase()??"text"),{lineClassNames:a,code:o}=function(e,n){let t=e.replace(/\r?\n$/,"");return function(e,n){let{metastring:t,magicComments:r}=n;if(t&&d.test(t)){let n=t.match(d).groups.range;if(0===r.length)throw Error(`A highlight range has been given in code block's metastring (\`\`\` ${t}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);let s=r[0].className;return{lineClassNames:Object.fromEntries(l()(n).filter(e=>e>0).map(e=>[e-1,[s]])),code:e}}return null}(t,{...n})??function(e,n){let{language:t,magicComments:r}=n;if(void 0===t)return{lineClassNames:{},code:e};let s=function(e,n){switch(e){case"js":case"javascript":case"ts":case"typescript":return m(["js","jsBlock"],n);case"jsx":case"tsx":return m(["js","jsBlock","jsx"],n);case"html":return m(["js","jsBlock","html"],n);case"python":case"py":case"bash":return m(["bash"],n);case"markdown":case"md":return m(["html","jsx","bash"],n);case"tex":case"latex":case"matlab":return m(["tex"],n);case"lua":case"haskell":return m(["lua"],n);case"sql":return m(["lua","jsBlock"],n);case"wasm":return m(["wasm"],n);case"vb":case"vba":case"visual-basic":return m(["vb","rem"],n);case"vbnet":return m(["vbnet","rem"],n);case"batch":return m(["rem"],n);case"basic":return m(["rem","f90"],n);case"fsharp":return m(["js","ml"],n);case"ocaml":case"sml":return m(["ml"],n);case"fortran":return m(["f90"],n);case"cobol":return m(["cobol"],n);default:return m(g,n)}}(t,r),i=e.split(/\r?\n/),a=Object.fromEntries(r.map(e=>[e.className,{start:0,range:""}])),o=Object.fromEntries(r.filter(e=>e.line).map(e=>{let{className:n,line:t}=e;return[t,n]})),c=Object.fromEntries(r.filter(e=>e.block).map(e=>{let{className:n,block:t}=e;return[t.start,n]})),d=Object.fromEntries(r.filter(e=>e.block).map(e=>{let{className:n,block:t}=e;return[t.end,n]}));for(let e=0;e<i.length;){let n=i[e].match(s);if(!n){e+=1;continue}let t=n.slice(1).find(e=>void 0!==e);o[t]?a[o[t]].range+=`${e},`:c[t]?a[c[t]].start=e:d[t]&&(a[d[t]].range+=`${a[d[t]].start}-${e-1},`),i.splice(e,1)}let h={};return Object.entries(a).forEach(e=>{let[n,{range:t}]=e;l()(t).forEach(e=>{h[e]??=[],h[e].push(n)})}),{code:i.join("\n"),lineClassNames:h}}(t,{...n})}(e.code,{metastring:e.metastring,magicComments:e.magicComments,language:s}),h=function(e){let{className:n,language:t}=e;return(0,i.Z)(n,t&&!n?.includes(`language-${t}`)&&`language-${t}`)}({className:e.className,language:s}),u=(r=e.metastring,(r?.match(c)?.groups.title??"")||e.title),p=function(e){let{showLineNumbers:n,metastring:t}=e;if("boolean"==typeof n)return n?1:void 0;if("number"==typeof n)return n;let r=t?.split(" ").find(e=>e.startsWith("showLineNumbers"));if(r)return r.startsWith("showLineNumbers=")?parseInt(r.replace("showLineNumbers=",""),10):1}({showLineNumbers:e.showLineNumbers,metastring:e.metastring});return{codeInput:e.code,code:o,className:h,language:s,title:u,lineNumbersStart:p,lineClassNames:a}}function x(e){let n={color:"--prism-color",backgroundColor:"--prism-background-color"},t={};return Object.entries(e.plain).forEach(e=>{let[r,s]=e,i=n[r];i&&"string"==typeof s&&(t[i]=s)}),t}let j=(0,s.createContext)(null);function f(e){let{metadata:n,wordWrap:t,children:i}=e,a=(0,s.useMemo)(()=>({metadata:n,wordWrap:t}),[n,t]);return(0,r.jsx)(j.Provider,{value:a,children:i})}function b(){let e=(0,s.useContext)(j);if(null===e)throw new o.i6("CodeBlockContextProvider");return e}},30623:function(e,n,t){t.d(n,{Y:()=>h,h:()=>c});var r=t(67294),s=t(3620),i=t(844),a=t(97486),l=t(32263),o=t(16971);function c(e){return r.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,r.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})?.filter(Boolean)??[]}function d(e){let{value:n,tabValues:t}=e;return t.some(e=>e.value===n)}function h(e){let{defaultValue:n,queryString:t=!1,groupId:h}=e,u=function(e){let{values:n,children:t}=e;return(0,r.useMemo)(()=>{let e=n??c(t).map(e=>{let{props:{value:n,label:t,attributes:r,default:s}}=e;return{value:n,label:t,attributes:r,default:s}}),r=(0,l.lx)(e,(e,n)=>e.value===n.value);if(r.length>0)throw Error(`Docusaurus error: Duplicate values "${r.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[n,t])}(e),[g,m]=(0,r.useState)(()=>(function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!d({value:n,tabValues:t}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let r=t.find(e=>e.default)??t[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:n,tabValues:u})),[p,x]=function(e){let{queryString:n=!1,groupId:t}=e,i=(0,s.k6)(),l=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,a._X)(l),(0,r.useCallback)(e=>{if(!l)return;let n=new URLSearchParams(i.location.search);n.set(l,e),i.replace({...i.location,search:n.toString()})},[l,i])]}({queryString:t,groupId:h}),[j,f]=function(e){let{groupId:n}=e,t=n?`docusaurus.tab.${n}`:null,[s,i]=(0,o.Nk)(t);return[s,(0,r.useCallback)(e=>{t&&i.set(e)},[t,i])]}({groupId:h}),b=(()=>{let e=p??j;return d({value:e,tabValues:u})?e:null})();return(0,i.Z)(()=>{b&&m(b)},[b]),{selectedValue:g,selectValue:(0,r.useCallback)(e=>{if(!d({value:e,tabValues:u}))throw Error(`Can't select invalid tab value=${e}`);m(e),x(e),f(e)},[x,f,u]),tabValues:u}}},5626:function(e,n,t){t.d(n,{Z:()=>a});var r=t(85893);t(67294);var s=t(8110),i=t(80483);function a(e){return e.live?(0,r.jsx)(i.Z,{...e}):(0,r.jsx)(s.Z,{...e})}},80483:function(e,n,t){t.d(n,{Z:()=>a});var r=t(85893);t(67294);var s=t(35010),i=t(62529);function a(e){return(0,r.jsx)(s.Z,{scope:i.Z,...e})}},57829:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893);t(67294);var s=t(43335);function i(e){let{children:n}=e;return(0,r.jsx)("div",{className:s.Z.playgroundContainer,children:n})}},49522:function(e,n,t){t.d(n,{Z:()=>c});var r=t(85893);t(67294);var s=t(62905),i=t(71607),a=t(77827),l=t(83372),o=t(7512);function c(){let e=(0,i.Z)();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l.Z,{children:(0,r.jsx)(a.Z,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,r.jsx)(s.uz,{className:o.Z.playgroundEditor},String(e))]})}},83372:function(e,n,t){t.d(n,{Z:()=>a});var r=t(85893);t(67294);var s=t(90496),i=t(926);function a(e){let{children:n}=e;return(0,r.jsx)("div",{className:(0,s.Z)(i.Z.playgroundHeader),children:n})}},45188:function(e,n,t){t.d(n,{Z:()=>l});var r=t(85893);t(67294);var s=t(26378),i=t(67191),a=t(49522);function l(){let{playgroundPosition:e}=(0,s.L)().liveCodeBlock;return(0,r.jsx)(r.Fragment,{children:"top"===e?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i.Z,{}),(0,r.jsx)(a.Z,{})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.Z,{}),(0,r.jsx)(i.Z,{})]})})}},67191:function(e,n,t){t.d(n,{Z:()=>g});var r=t(85893);t(67294);var s=t(62905),i=t(56497),a=t(12565),l=t(83176),o=t(77827),c=t(83372),d=t(25562);function h(){return(0,r.jsx)("div",{children:"Loading..."})}function u(){return(0,r.jsx)(i.Z,{fallback:(0,r.jsx)(h,{}),children:()=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l.Z,{fallback:e=>(0,r.jsx)(a.Ac,{...e}),children:(0,r.jsx)(s.i5,{})}),(0,r.jsx)(s.IF,{})]})})}function g(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(c.Z,{children:(0,r.jsx)(o.Z,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,r.jsx)("div",{className:d.Z.playgroundPreview,children:(0,r.jsx)(u,{})})]})}},9002:function(e,n,t){t.d(n,{Z:()=>l});var r=t(85893);t(67294);var s=t(62905),i=t(10099);let a=e=>`${e};`;function l(e){let{code:n,children:t,...l}=e,o=(0,i.p)(),c=l.metastring?.includes("noInline")??!1;return(0,r.jsx)(s.nu,{noInline:c,theme:o,...l,code:n?.replace(/\n$/,""),transformCode:l.transformCode??a,children:t})}},35010:function(e,n,t){t.d(n,{Z:()=>l});var r=t(85893);t(67294);var s=t(9002),i=t(57829),a=t(45188);function l(e){let{children:n,transformCode:t,...l}=e;return(0,r.jsx)(i.Z,{children:(0,r.jsx)(s.Z,{code:n,...l,children:(0,r.jsx)(a.Z,{})})})}},56497:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893);t(67294);var s=t(71607);function i(e){let{children:n,fallback:t}=e;return(0,s.Z)()?(0,r.jsx)(r.Fragment,{children:n?.()}):t??null}},44456:function(e,n,t){t.d(n,{Z:()=>a});var r=t(85893);t(67294);var s=t(90496),i=t(67079);function a(e){let{children:n,minHeight:t,url:a="http://localhost:3000",style:l,bodyStyle:o}=e;return(0,r.jsxs)("div",{className:i.Z.browserWindow,style:{...l,minHeight:t},children:[(0,r.jsxs)("div",{className:i.Z.browserWindowHeader,children:[(0,r.jsxs)("div",{className:i.Z.buttons,children:[(0,r.jsx)("span",{className:i.Z.dot,style:{background:"#f25f58"}}),(0,r.jsx)("span",{className:i.Z.dot,style:{background:"#fbbe3c"}}),(0,r.jsx)("span",{className:i.Z.dot,style:{background:"#58cb42"}})]}),(0,r.jsx)("div",{className:(0,s.Z)(i.Z.browserWindowAddressBar,"text--truncate"),children:a}),(0,r.jsx)("div",{className:i.Z.browserWindowMenuIcon,children:(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:i.Z.bar}),(0,r.jsx)("span",{className:i.Z.bar}),(0,r.jsx)("span",{className:i.Z.bar})]})})]}),(0,r.jsx)("div",{className:i.Z.browserWindowBody,style:o,children:n})]})}},14547:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893);t(67294);var s=t(5626);function i(e){return(0,r.jsx)(s.Z,{...e})}},63627:function(e,n,t){t.r(n),t.d(n,{ButtonExample:()=>s});var r=t(85893);function s(e){return(0,r.jsx)("button",{type:"button",...e,style:{backgroundColor:"white",color:"black",border:"solid red",borderRadius:20,padding:10,cursor:"pointer",...e.style}})}t(67294)},62529:function(e,n,t){t.d(n,{Z:()=>i});var r=t(67294),s=t(63627);let i={React:r,...r,...s}},19644:function(e){e.exports=JSON.parse('{"id":"guides/markdown-features/code-blocks","title":"Code blocks","description":"Handling code blocks in Docusaurus Markdown","source":"@site/docs/guides/markdown-features/markdown-features-code-blocks.mdx","sourceDirName":"guides/markdown-features","slug":"/markdown-features/code-blocks","permalink":"/docs/markdown-features/code-blocks","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1751542800000,"frontMatter":{"id":"code-blocks","description":"Handling code blocks in Docusaurus Markdown","slug":"/markdown-features/code-blocks"},"sidebar":"docs","previous":{"title":"Tabs","permalink":"/docs/markdown-features/tabs"},"next":{"title":"Admonitions","permalink":"/docs/markdown-features/admonitions"}}')}}]);