"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3940"],{8913:function(e,n,s){s.r(n),s.d(n,{default:()=>m,frontMatter:()=>o,metadata:()=>r,assets:()=>c,toc:()=>h,contentTitle:()=>t});var r=JSON.parse('{"id":"markdown-to-livecodes","title":"Markdown to LiveCodes","description":"Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds.","source":"@site/docs/markdown-to-livecodes.mdx","sourceDirName":".","slug":"/markdown-to-livecodes","permalink":"/docs/markdown-to-livecodes","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/markdown-to-livecodes.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"GitHub Action \u26A1","permalink":"/docs/gh-action"},"next":{"title":"Contribution","permalink":"/docs/contribution"}}'),a=s("5893"),i=s("65"),l=s("8168"),d=s("7645");let o={},t="Markdown to LiveCodes",c={},h=[{value:"Demo",id:"demo",level:2},{value:"Packages",id:"packages",level:2},{value:"Usage",id:"usage",level:2},{value:"markdown-it-livecodes",id:"markdown-it-livecodes",level:3},{value:"marked-livecodes",id:"marked-livecodes",level:3},{value:"remark-livecodes",id:"remark-livecodes",level:3},{value:"gatsby-remark-livecodes",id:"gatsby-remark-livecodes",level:3},{value:"Options",id:"options",level:2},{value:"Meta Parameters",id:"meta-parameters",level:2},{value:"Using with Frameworks",id:"using-with-frameworks",level:2},{value:"Astro",id:"astro",level:3},{value:"Docusaurus",id:"docusaurus",level:3},{value:"Eleventy",id:"eleventy",level:3},{value:"Gatsby",id:"gatsby",level:3},{value:"Next.js",id:"nextjs",level:3},{value:"react-markdown",id:"react-markdown",level:3},{value:"Storybook",id:"storybook",level:3},{value:"VitePress",id:"vitepress",level:3}];function u(e){let n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",iframe:"iframe",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"markdown-to-livecodes",children:"Markdown to LiveCodes"})}),"\n",(0,a.jsx)(n.p,{children:"Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds."}),"\n",(0,a.jsxs)(n.p,{children:["The playgrounds can run any of the supported ",(0,a.jsx)(n.a,{href:"/docs/languages/",children:"languages"})," in LiveCodes, and can be customized to any of the ",(0,a.jsx)(n.a,{href:"/docs/configuration/",children:"configuration options"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["A fenced code block in Markdown can be rendered as a LiveCodes playground by adding the ",(0,a.jsx)(n.code,{children:"livecodes"})," parameter to the code block language meta."]}),"\n",(0,a.jsxs)(n.p,{children:["This is provided as ",(0,a.jsx)(n.a,{href:"#packages",children:"plugins"})," for ",(0,a.jsx)(n.a,{href:"https://github.com/markdown-it/markdown-it",children:"markdown-it"}),", ",(0,a.jsx)(n.a,{href:"https://github.com/markedjs/marked",children:"marked"})," and ",(0,a.jsx)(n.a,{href:"https://github.com/remarkjs/remark",children:"remark"}),'.\nThese plugins allow the seamless integration with most of the popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. See the section "',(0,a.jsx)(n.a,{href:"#using-with-frameworks",children:"Using with Frameworks"}),'" for getting started.']}),"\n",(0,a.jsx)(n.h2,{id:"demo",children:"Demo"}),"\n",(0,a.jsx)(n.p,{children:"This is an example code block:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-md",children:'```jsx\nimport { useState } from "react";\n\nfunction App() {\n  const [count, setCount] = useState(0);\n  return (\n    <div>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default App;\n```\n'})}),"\n",(0,a.jsx)(n.p,{children:"The above code block is normally rendered like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:'import { useState } from "react";\n\nfunction App() {\n  const [count, setCount] = useState(0);\n  return (\n    <div>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default App;\n'})}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsxs)(n.p,{children:["The code block can instead be rendered as an interactive playground by adding the ",(0,a.jsx)(n.code,{children:"livecodes"})," parameter to the code block language meta:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-md",metastring:"{1}",children:'```jsx livecodes\nimport { useState } from "react";\n\nfunction App() {\n  const [count, setCount] = useState(0);\n  return (\n    <div>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default App;\n```\n'})}),"\n",(0,a.jsx)(n.p,{children:"to be displayed like this:"}),"\n",(0,a.jsx)(n.iframe,{scrolling:"no",loading:"eager",style:{height:"300px",width:"100%",border:"1px solid black",borderRadius:"6px"},className:"",src:"https://livecodes.io/#params=N4Igtg9gJgpiBcIDOBLMAHANnANCAVkgB4IhroQBOALgATC0CuSMAytQIbUy0C%2BtAM0oQwtADohKMDgGNqEgNxiAdioGNlclBGW0AgunQAKAJT0VtWjJ1I6AbWsbqOWi2oBhCE4C6tALxMLOxcMEYADCZKurRS1IyUukYWlrQAPFAoAG4AfMkpaejZAJpeVpgoMgDWMFD0jsrU-NRoMEgAdKkA9IV5KakARozU1Dq0Ou7lVX7Apv7ZrjAeXg1G9XQA1LQAjCa82RMVlbRgMF2Dwzq50ZZdGTnJkSq8KiowRBQ0tLACHIyYdAZ0AoQLwgA"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsxs)(n.p,{children:["The playground can be customized by setting ",(0,a.jsx)(n.a,{href:"#options",children:"options"})," that are applied to all code blocks or by ",(0,a.jsx)(n.a,{href:"#meta-parameters",children:"meta parameters"})," that are applied to individual code blocks."]}),"\n",(0,a.jsxs)(n.p,{children:["Alternatively, the code block can be kept as it is, and a button or a link (",(0,a.jsx)(n.strong,{children:"Edit in LiveCodes"}),") is appended, below the code block, that opens the code in a LiveCodes playground.\nThis is achieved by adding the ",(0,a.jsx)(n.code,{children:"render=button"})," or ",(0,a.jsx)(n.code,{children:"render=link"})," parameter to the code block language meta."]}),"\n",(0,a.jsx)(n.p,{children:"This displays a button:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-md",metastring:"{1}",children:'```jsx livecodes render=button\nimport { useState } from "react";\n\nfunction App() {\n  const [count, setCount] = useState(0);\n  return (\n    <div>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default App;\n```\n'})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:"",children:'import { useState } from "react";\n\nfunction App() {\n  const [count, setCount] = useState(0);\n  return (\n    <div>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default App;\n'})}),"\n",(0,a.jsx)(n.a,{href:"https://livecodes.io/#params=N4IgVgzgHiBcIEsC2AHA9gJwC4AJg4FcIBTAZSwEMticBfHAMwzSRwB0QNiKBjLDgNxsAdiIYFhfBGmE4AgihQAKAJR4ROHDxkRcAbW0SsAGhwksAYTRGAujgC8hEuSrElABhVDZOLlgIYskoamjgAPAAmCABuAHwhoeEosQCa1loANgg8ANbEEXiGwlj0WMjEEAB0YQD0yQmhYQBGBFhYMjgyFlm59sCqDrFmxJbWxUpFuADUOACMKrSx3dk5OEjEtS1tMvE%2BmrVRcSFeIrQiIsRQ6Ng4EcQMFAQZuAooAiC0QA",target:"_blank",rel:"noopener noreferrer",className:"",children:(0,a.jsx)(n.img,{src:"https://livecodes.io/livecodes/assets/images/edit-in-livecodes-button.svg",alt:"Edit in LiveCodes",style:{height:"28px"}})}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(n.p,{children:"While this displays a link:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-md",metastring:"{1}",children:'```jsx livecodes render=link\nimport { useState } from "react";\n\nfunction App() {\n  const [count, setCount] = useState(0);\n  return (\n    <div>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default App;\n```\n'})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:"",children:'import { useState } from "react";\n\nfunction App() {\n  const [count, setCount] = useState(0);\n  return (\n    <div>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default App;\n'})}),"\n",(0,a.jsx)(n.a,{href:"https://livecodes.io/#params=N4IgVgzgHiBcIEsC2AHA9gJwC4AJg4FcIBTAZSwEMticBfHAMwzSRwB0QNiKBjLDgNxsAdiIYFhfBGmE4AgihQAKAJR4ROHDxkRcAbW0SsAGhwksAYTRGAujgC8hEuSrElABhVDZOLlgIYskoamjgAPAAmCABuAHwhoeEosQCa1loANgg8ANbEEXiGwlj0WMjEEAB0YQD0yQmhYQBGBFhYMjgyFlm59sCqDrFmxJbWxUpFuADUOACMKrSx3dk5OEjEtS1tMvE%2BmrVRcSFeIrQiIsRQ6Ng4EcQMFAQZuAooAiC0QA",target:"_blank",rel:"noopener noreferrer",className:"",children:"Edit in LiveCodes"}),"\n",(0,a.jsx)(n.h2,{id:"packages",children:"Packages"}),"\n",(0,a.jsxs)(n.p,{children:["All the functionality described here can be achieved using ",(0,a.jsx)(n.em,{children:"any"})," of the following packages:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/markdown-it-livecodes",children:(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})}),": A ",(0,a.jsx)(n.a,{href:"https://github.com/markdown-it/markdown-it",children:"markdown-it"})," plugin."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/marked-livecodes",children:(0,a.jsx)(n.code,{children:"marked-livecodes"})}),": A ",(0,a.jsx)(n.a,{href:"https://github.com/markedjs/marked",children:"marked"})," plugin."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/remark-livecodes",children:(0,a.jsx)(n.code,{children:"remark-livecodes"})}),": A ",(0,a.jsx)(n.a,{href:"https://github.com/remarkjs/remark",children:"remark"})," plugin."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/gatsby-remark-livecodes",children:(0,a.jsx)(n.code,{children:"gatsby-remark-livecodes"})}),": A ",(0,a.jsx)(n.a,{href:"https://github.com/gatsbyjs/gatsby",children:"gatsby"})," plugin."]}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:['See the section "',(0,a.jsx)(n.a,{href:"#using-with-frameworks",children:"Using with Frameworks"}),'" for using the plugins with popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc.']}),"\n",(0,a.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsx)(n.h3,{id:"markdown-it-livecodes",children:"markdown-it-livecodes"}),"\n",(0,a.jsxs)(n.p,{children:["To use the ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," plugin, first install it:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install markdown-it markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add markdown-it markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add markdown-it markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add markdown-it markdown-it-livecodes\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"Then it can be used like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'import markdownIt from "markdown-it";\nimport markdownItLivecodes from "markdown-it-livecodes";\n\nconst input = "```js livecodes \\nconsole.log(\'Hello World!\');\\n```";\n\nconst output = markdownIt()\n  .use(markdownItLivecodes, {\n    /* options */\n  })\n  .render(input);\n\nconsole.log(output); // <iframe ...></iframe>\n'})}),"\n",(0,a.jsx)(n.h3,{id:"marked-livecodes",children:"marked-livecodes"}),"\n",(0,a.jsxs)(n.p,{children:["To use the ",(0,a.jsx)(n.code,{children:"marked-livecodes"})," plugin, first install it:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install marked marked-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add marked marked-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add marked marked-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add marked marked-livecodes\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"Then it can be used like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'import marked from "marked";\nimport markedLivecodes from "marked-livecodes";\n\nconst input = "```js livecodes \\nconsole.log(\'Hello World!\');\\n```";\n\nconst output = await marked\n  .use(markedLivecodes, {\n    /* options */\n  })\n  .parse(input);\n\nconsole.log(output); // <iframe ...></iframe>\n'})}),"\n",(0,a.jsx)(n.h3,{id:"remark-livecodes",children:"remark-livecodes"}),"\n",(0,a.jsxs)(n.p,{children:["To use the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin, first install it:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install remark remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add remark remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add remark remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add remark remark-livecodes\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"Then it can be used like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'import { remark } from "remark";\nimport remarkLivecodes from "remark-livecodes";\n\nconst input = "```js livecodes \\nconsole.log(\'Hello World!\');\\n```";\n\nconst output = await remark()\n  .use(remarkLivecodes, {\n    /* options */\n  })\n  .process(input);\n\nconsole.log(String(output)); // <iframe ...></iframe>\n'})}),"\n",(0,a.jsx)(n.h3,{id:"gatsby-remark-livecodes",children:"gatsby-remark-livecodes"}),"\n",(0,a.jsxs)(n.p,{children:["See usage with ",(0,a.jsx)(n.a,{href:"#gatsby",children:"Gatsby"}),"."]}),"\n",(0,a.jsx)(n.h2,{id:"options",children:"Options"}),"\n",(0,a.jsx)(n.p,{children:"Options can be passed to the plugins. These options apply to all code blocks."}),"\n",(0,a.jsxs)(n.p,{children:["These options include LiveCodes SDK ",(0,a.jsx)(n.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"})," (except ",(0,a.jsx)(n.code,{children:"headless"}),")."]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'const output = await remark()\n  .use(remarkLivecodes, {\n    // highlight-start\n    loading: "click",\n    params: {\n      console: "open"\n      theme: "light",\n    }\n    // highlight-end\n  })\n  .process(input);\n'})}),"\n",(0,a.jsx)(n.p,{children:"In addition, the following options are also available:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"render"}),": The render mode for the LiveCodes playgrounds. This can be one of the following:","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"playground"})," (default): Replaces the code block with an iframe that displays the LiveCodes playground. By default, ",(0,a.jsxs)(n.a,{href:"/docs/features/display-modes",children:[(0,a.jsx)(n.code,{children:'"simple"'})," mode"]})," is used, but this can be changed in ",(0,a.jsx)(n.a,{href:"#options",children:"options"})," or ",(0,a.jsx)(n.a,{href:"#meta-parameters",children:"meta parameters"}),"."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"link"}),": Keeps the code block as it is, and appends a link (",(0,a.jsx)(n.strong,{children:"Edit in LiveCodes"}),"), below the code block, that opens the code in a LiveCodes playground."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"button"}),": Keeps the code block as it is, and appends a button (Edit in LiveCodes), below the code block, that opens the code in a LiveCodes playground.",(0,a.jsx)("br",{}),"\n",(0,a.jsx)("img",{src:"https://dev.livecodes.io/livecodes/assets/images/edit-in-livecodes-button.svg",alt:"Edit in LiveCodes button",style:{height:"28px"}}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"meta"}),": Keeps the code block as it is, and adds the URL of the playground to the ",(0,a.jsx)(n.code,{children:"data-livecodes-url"})," attribute of the ",(0,a.jsx)(n.code,{children:"<code>"})," element. In addition, in ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," the URL is added to the AST (",(0,a.jsx)(n.code,{children:"node.data.livecodesUrl"})," and ",(0,a.jsx)(n.code,{children:"node.data.hProperties.dataLivecodesUrl"}),"). In ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," the URL is added to ",(0,a.jsx)(n.code,{children:"env.livecodesUrl"}),".\nThis can be used by other plugins (e.g. to display a custom run button overlying the code block)."]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"height"}),": The height of the playground iframe."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"className"}),": The class name to be applied to the iframe, link or button.\nNote: If the class name of the button contains ",(0,a.jsx)(n.code,{children:'"dark"'})," (e.g. ",(0,a.jsx)(n.code,{children:'"dark-btn"'}),"), the dark button will be used.",(0,a.jsx)("br",{}),"\n",(0,a.jsx)("img",{src:"https://dev.livecodes.io/livecodes/assets/images/edit-in-livecodes-button-dark.svg",alt:"Edit in LiveCodes button",style:{height:"28px"}}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"auto"}),": When set to ",(0,a.jsx)(n.code,{children:"true"}),", it automatically enables the ",(0,a.jsx)(n.code,{children:"livecodes"})," parameter for all code blocks without having to explicitly add it.\nThis is useful when you have a large number of code blocks and don't want to add the ",(0,a.jsx)(n.code,{children:"livecodes"})," parameter to each code block.\nTo disable this for a specific code block, add the ",(0,a.jsx)(n.code,{children:"livecodes=false"})," ",(0,a.jsx)(n.a,{href:"#meta-parameters",children:"meta parameter"})," to the code block."]}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"meta-parameters",children:"Meta Parameters"}),"\n",(0,a.jsx)(n.p,{children:"Individual code blocks can be configured using meta parameters. These are key/value pairs, separated by spaces, that are added after the language name."}),"\n",(0,a.jsxs)(n.p,{children:["Meta parameters of code blocks override the ",(0,a.jsx)(n.a,{href:"#options",children:"options"})," passed to the plugin."]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-markdown",metastring:"{1}",children:'```jsx livecodes render=button className=dark-btn console=open\nimport { useState, useEffect } from "react";\n\nexport default () => {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log("count:", count);\n  }, [count]);\n\n  return (\n    <div>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n};\n```\n'})}),"\n",(0,a.jsxs)(n.p,{children:["All LiveCodes ",(0,a.jsx)(n.a,{href:"/docs/configuration/query-params",children:"configuration query parameters"})," can be used as code block meta parameters (e.g. ",(0,a.jsx)(n.code,{children:" ```js livecodes console=open theme=light"}),"). See the ",(0,a.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"LiveCodes configuration docs"})," for more information."]}),"\n",(0,a.jsx)(n.p,{children:"In addition, the following meta parameters are available:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"livecodes"}),": Enables the LiveCodes playground for the code block. This can be omitted if the ",(0,a.jsx)(n.code,{children:"auto"})," option is set to ",(0,a.jsx)(n.code,{children:"true"}),". When ",(0,a.jsx)(n.code,{children:"livecodes"})," is set to ",(0,a.jsx)(n.code,{children:"false"}),", the code block is not handled by the plugin."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"render"}),": The render mode. See the ",(0,a.jsx)(n.a,{href:"#options",children:"Options"})," section for more information."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"height"}),": The height of the playground iframe."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"className"}),": The class name for the playground iframe, link or button."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"lang"}),": This overrides the language of the code block (e.g. ",(0,a.jsx)(n.code,{children:" ```jsx livecodes lang=react"})," or ",(0,a.jsx)(n.code,{children:" ```py livecodes lang=py-wasm"}),"). See the ",(0,a.jsx)(n.a,{href:"/docs/languages/",children:"Languages"})," docs for more language information."]}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"using-with-frameworks",children:"Using with Frameworks"}),"\n",(0,a.jsx)(n.p,{children:"This guide shows how to use the suitable plugin in different frameworks."}),"\n",(0,a.jsx)(n.h3,{id:"astro",children:"Astro"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-astro.pages.dev/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-astro",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev remark-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"astro.config.mjs"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="astro.config.js"',children:'import { defineConfig } from "astro/config";\nimport mdx from "@astrojs/mdx";\nimport remarkLivecodes from "remark-livecodes";\n\nexport default defineConfig({\n  // ...\n  integrations: [mdx()],\n  markdown: {\n    remarkPlugins: [\n      [remarkLivecodes, { /* options */ }],\n    ],\n  },\n});\n'})}),"\n",(0,a.jsx)(n.h3,{id:"docusaurus",children:"Docusaurus"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-docusaurus.pages.dev/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-docusaurus",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev remark-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"docusaurus.config.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n  presets: [\n    [\n      'classic',\n      {\n        docs: {\n          // ...\n          remarkPlugins: [\n            [require('remark-livecodes'), { /* options */ }],\n          ],\n        },\n      },\n    ],\n  ],\n  // ...\n};\n"})}),"\n",(0,a.jsx)(n.h3,{id:"eleventy",children:"Eleventy"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-11ty.pages.dev/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-11ty",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev markdown-it-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"eleventy.config.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="eleventy.config.js"',children:'import markdownItLivecodes from "markdown-it-livecodes";\n\nexport default async function (eleventyConfig) {\n  eleventyConfig.amendLibrary("md", (mdLib) =>\n    mdLib.use(markdownItLivecodes, { /* options */ }),\n  );\n  // ...\n}\n'})}),"\n",(0,a.jsx)(n.h3,{id:"gatsby",children:"Gatsby"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-gatsby.pages.dev/markdown-to-livecodes/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-gatsby",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"gatsby-remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D gatsby-remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev gatsby-remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D gatsby-remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev gatsby-remark-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"gatsby-remark-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"gatsby-config.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="gatsby-config.js"',children:"module.exports = {\n  // ...\n  plugins: [\n    // ...\n    {\n      resolve: 'gatsby-transformer-remark',\n      options: {\n        plugins: [\n          {\n            resolve: 'gatsby-remark-livecodes',\n            options: { /* options */ },\n          },\n        ],\n      },\n    },\n  ],\n};\n"})}),"\n",(0,a.jsx)(n.h3,{id:"nextjs",children:"Next.js"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-nextjs.pages.dev/mdx-page",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-nextjs",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["See ",(0,a.jsx)(n.a,{href:"https://nextjs.org/docs/app/guides/mdx",children:"Next.js docs"})," for using markdown and MDX in Next.js."]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev remark-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"next.config.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="next.config.js"',children:'import createMDX from "@next/mdx";\nimport remarkLivecodes from "remark-livecodes";\n\nconst nextConfig = {\n  // ...\n  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],\n};\n\nconst withMDX = createMDX({\n  options: {\n    remarkPlugins: [\n      [remarkLivecodes, { /* other options */ }],\n    ],\n  },\n});\n\nexport default withMDX(nextConfig);\n'})}),"\n",(0,a.jsxs)(n.p,{children:["When using Turbopack for local development, check the guide for ",(0,a.jsx)(n.a,{href:"https://nextjs.org/docs/app/guides/mdx#using-plugins-with-turbopack",children:"using plugins with Turbopack"}),"."]}),"\n",(0,a.jsx)(n.h3,{id:"react-markdown",children:"react-markdown"}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"react-markdown"})," is a React component to render markdown."]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for using the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin with ",(0,a.jsx)(n.code,{children:"react-markdown"}),":"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add remark-livecodes\n"})})})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="App.jsx"',children:"import Markdown from 'react-markdown';\nimport remarkLivecodes from 'remark-livecodes';\n\nconst markdown =\n  '```jsx livecodes\\nexport default () => <h1>Hello World</h1>\\n```';\n\nexport default () => (\n  <Markdown remarkPlugins={[[remarkLivecodes, { /* options */ }]]}>\n    {markdown}\n  </Markdown>\n);\n"})}),"\n",(0,a.jsx)(n.a,{href:"https://livecodes.io/#params=N4IgLglmA2CmIC4QB0QEEAOGB0ArAzgB6ogA0IBhiIEAthgPYBOYABALICGTA1gCYMA7gDtWAMyYNarAORNYnAMZgAtLW78hwmQG5kwuoxat563gBkIAN1iKGfWPnGTpc2GZ4ro12-ce79fTthfDYPARFWAF59VlkAA0TKVm8bOwd8ZH1YQiM2BzFOAFdoNgAKAEpogD5WAB4ACwBGaoAJWGhoBlYAdWZoPjqAembqrOFE%2BIDhbNzmfNhCkvKqqNqy2PquXgjRUw0ABWgigHMIEKjgAG0r-YsfdMdSVmBWIYAqVgYMSAYQ1neQ1YAF8ALqg4FjURxF7hLTAzbDbaaERQio6EDAoA",target:"_blank",rel:"noopener noreferrer",className:"",children:(0,a.jsx)(n.img,{src:"https://livecodes.io/livecodes/assets/images/edit-in-livecodes-button.svg",alt:"Edit in LiveCodes",style:{height:"28px"}})}),"\n",(0,a.jsx)(n.h3,{id:"storybook",children:"Storybook"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-storybook.pages.dev/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-storybook",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev remark-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"storybook/main.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="storybook/main.js"',children:'import remarkLivecodes from "remark-livecodes";\n\nexport default {\n  // ...\n  addons: [\n    // ...\n    {\n      name: "@storybook/addon-docs",\n      options: {\n        mdxPluginOptions: {\n          mdxCompileOptions: {\n            remarkPlugins: [\n              [remarkLivecodes, { /* options */ }],\n            ],\n          },\n        },\n      },\n    },\n  ],\n};\n'})}),"\n",(0,a.jsx)(n.h3,{id:"vitepress",children:"VitePress"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-vitepress.pages.dev/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-vitepress",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev markdown-it-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"vitepress.config.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title=".vitepress/config.js"',children:'import { defineConfig } from "vitepress";\nimport markDownItLivecodes from "markdown-it-livecodes";\n\nexport default defineConfig({\n  // ...\n  markdown: {\n    config: (md) => {\n      md.use(markDownItLivecodes, { /* options */ });\n    },\n  },\n});\n'})})]})}function m(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},7645:function(e,n,s){s.d(n,{Z:()=>i});var r=s("5893");s("7294");var a=s("7026");function i(e){let{children:n,hidden:s,className:i}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,a.Z)("tabItem_Ymn6",i),hidden:s,children:n})}},8168:function(e,n,s){s.d(n,{Z:()=>v});var r=s("5893"),a=s("7294"),i=s("7026"),l=s("4718"),d=s("6550"),o=s("8714"),t=s("9207"),c=s("9413"),h=s("4510");function u(e){return a.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||a.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 m(e){let{value:n,tabValues:s}=e;return s.some(e=>e.value===n)}var p=s("6735");function x(e){let{className:n,block:s,selectedValue:a,selectValue:d,tabValues:o}=e,t=[],{blockElementScrollPositionUntilNextRender:c}=(0,l.o5)(),h=e=>{let n=e.currentTarget,s=o[t.indexOf(n)].value;s!==a&&(c(n),d(s))},u=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let s=t.indexOf(e.currentTarget)+1;n=t[s]??t[0];break}case"ArrowLeft":{let s=t.indexOf(e.currentTarget)-1;n=t[s]??t[t.length-1]}}n?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":s},n),children:o.map(e=>{let{value:n,label:s,attributes:l}=e;return(0,r.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>{t.push(e)},onKeyDown:u,onClick:h,...l,className:(0,i.Z)("tabs__item","tabItem_LNqP",l?.className,{"tabs__item--active":a===n}),children:s??n},n)})})}function j(e){let{lazy:n,children:s,selectedValue:l}=e,d=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){let e=d.find(e=>e.props.value===l);return e?(0,a.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:d.map((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==l}))})}function g(e){let n=function(e){let{defaultValue:n,queryString:s=!1,groupId:r}=e,i=function(e){let{values:n,children:s}=e;return(0,a.useMemo)(()=>{let e=n??u(s).map(e=>{let{props:{value:n,label:s,attributes:r,default:a}}=e;return{value:n,label:s,attributes:r,default:a}});return!function(e){let n=(0,c.lx)(e,(e,n)=>e.value===n.value);if(n.length>0)throw Error(`Docusaurus error: Duplicate values "${n.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e},[n,s])}(e),[l,p]=(0,a.useState)(()=>(function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!m({value:n,tabValues:s}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let r=s.find(e=>e.default)??s[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:n,tabValues:i})),[x,j]=function(e){let{queryString:n=!1,groupId:s}=e,r=(0,d.k6)(),i=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)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 s??null}({queryString:n,groupId:s});return[(0,t._X)(i),(0,a.useCallback)(e=>{if(!i)return;let n=new URLSearchParams(r.location.search);n.set(i,e),r.replace({...r.location,search:n.toString()})},[i,r])]}({queryString:s,groupId:r}),[g,v]=function(e){let{groupId:n}=e,s=n?`docusaurus.tab.${n}`:null,[r,i]=(0,h.Nk)(s);return[r,(0,a.useCallback)(e=>{s&&i.set(e)},[s,i])]}({groupId:r}),k=(()=>{let e=x??g;return m({value:e,tabValues:i})?e:null})();return(0,o.Z)(()=>{k&&p(k)},[k]),{selectedValue:l,selectValue:(0,a.useCallback)(e=>{if(!m({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);p(e),j(e),v(e)},[j,v,i]),tabValues:i}}(e);return(0,r.jsxs)("div",{className:(0,i.Z)("tabs-container","tabList__CuJ"),children:[(0,r.jsx)(x,{...n,...e}),(0,r.jsx)(j,{...n,...e})]})}function v(e){let n=(0,p.Z)();return(0,r.jsx)(g,{...e,children:u(e.children)},String(n))}},65:function(e,n,s){s.d(n,{Z:function(){return d},a:function(){return l}});var r=s(7294);let a={},i=r.createContext(a);function l(e){let n=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]);