3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-04 20:02:54 +02:00
Code Issues Projects Releases Packages Wiki Activity
docusaurus/assets/js/64dfb3e9.fe83a102.js
slorber 8c4cadfc08 deploy: 904b53b963
2024-10-13 08:00:31 +00:00

1 line
No EOL
62 KiB
JavaScript
Raw Blame History

"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["59172"],{41918:function(e,n,t){t.d(n,{Z:function(){return r}});let r="/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React, {useState} from 'react';\n\nexport default function MyComponent() {\n const [bool, setBool] = useState(false);\n return (\n <div>\n <p>MyComponent rendered !</p>\n <p>bool={bool ? 'true' : 'false'}</p>\n <p>\n <button onClick={() => setBool((b) => !b)}>toggle bool</button>\n </p>\n </div>\n );\n}\n"},78230:function(e,n,t){t.r(n),t.d(n,{Highlight:()=>b,metadata:()=>r,contentTitle:()=>h,default:()=>j,assets:()=>m,toc:()=>g,frontMatter:()=>f});var r=JSON.parse('{"id":"guides/markdown-features/react","title":"MDX and React","description":"Using the power of React in Docusaurus Markdown documents, thanks to MDX","source":"@site/docs/guides/markdown-features/markdown-features-react.mdx","sourceDirName":"guides/markdown-features","slug":"/markdown-features/react","permalink":"/docs/markdown-features/react","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-react.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1728806279000,"frontMatter":{"id":"react","description":"Using the power of React in Docusaurus Markdown documents, thanks to MDX","slug":"/markdown-features/react"},"sidebar":"docs","previous":{"title":"Markdown Features","permalink":"/docs/markdown-features"},"next":{"title":"Tabs","permalink":"/docs/markdown-features/tabs"}}'),o=t("24246"),i=t("80980"),a=t("14522"),c=t("15398"),s=t("58636"),l=t("95998"),u=t("41918");function d(e){let n={code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("span",{children:["Hello ",e.name]}),"\n",(0,o.jsxs)(n.p,{children:["This is text some content from ",(0,o.jsx)(n.code,{children:"_markdown-partial-example.md"}),"."]})]})}function p(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}t("78596");let f={id:"react",description:"Using the power of React in Docusaurus Markdown documents, thanks to MDX",slug:"/markdown-features/react"},h="MDX and React",m={},b=({children:e,color:n})=>{let t={span:"span",...(0,i.a)()};return(0,o.jsx)(t.span,{style:{backgroundColor:n,borderRadius:"2px",color:"#fff",padding:"0.2rem"},children:e})},g=[{value:"Exporting components",id:"exporting-components",level:3},{value:"Importing components",id:"importing-components",level:3},{value:"MDX component scope",id:"mdx-component-scope",level:3},{value:"Markdown and JSX interoperability",id:"markdown-and-jsx-interoperability",level:3},{value:"Importing code snippets",id:"importing-code-snippets",level:2},{value:"Importing Markdown",id:"importing-markdown",level:2},{value:"Available exports",id:"available-exports",level:2}];function y(e){let n={a:"a",admonition:"admonition",b:"b",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"mdx-and-react",children:"MDX and React"})}),"\n","\n",(0,o.jsxs)(n.p,{children:["Docusaurus has built-in support for ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/",children:"MDX"}),", which allows you to write JSX within your Markdown files and render them as React components."]}),"\n",(0,o.jsxs)(n.p,{children:["Check out the ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/",children:"MDX docs"})," to see what fancy stuff you can do with MDX."]}),"\n",(0,o.jsxs)(n.admonition,{title:"Debugging MDX",type:"tip",children:[(0,o.jsx)(n.p,{children:"The MDX format is quite strict, and you may get compilation errors."}),(0,o.jsxs)(n.p,{children:["Use the ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://mdxjs.com/playground/",children:"MDX playground"})})," to debug them and make sure your syntax is valid."]})]}),"\n",(0,o.jsx)(n.admonition,{type:"info",children:(0,o.jsxs)(n.p,{children:["Prettier, the most popular formatter, ",(0,o.jsx)(n.a,{href:"https://github.com/prettier/prettier/issues/12209",children:"supports only the legacy MDX v1"}),". If you get an unintentional formatting result, you may want to add ",(0,o.jsx)(n.code,{children:"{/* prettier-ignore */}"})," before the problematic area, or add ",(0,o.jsx)(n.code,{children:"*.mdx"})," to your ",(0,o.jsx)(n.code,{children:".prettierignore"}),", until Prettier has proper support for MDX v3. ",(0,o.jsxs)(n.a,{href:"https://github.com/orgs/mdx-js/discussions/2067",children:["One of the main authors of MDX recommends ",(0,o.jsx)(n.code,{children:"remark-cli"})," with ",(0,o.jsx)(n.code,{children:"remark-mdx"})]}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"exporting-components",children:"Exporting components"}),"\n",(0,o.jsxs)(n.p,{children:["To define any custom component within an MDX file, you have to export it: only paragraphs that start with ",(0,o.jsx)(n.code,{children:"export"})," will be parsed as components instead of prose."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:"export const Highlight = ({children, color}) => (\n <span\n style={{\n backgroundColor: color,\n borderRadius: '2px',\n color: '#fff',\n padding: '0.2rem',\n }}>\n {children}\n </span>\n);\n\n<Highlight color=\"#25c2a0\">Docusaurus green</Highlight> and <Highlight color=\"#1877F2\">Facebook blue</Highlight> are my favorite colors.\n\nI can write **Markdown** alongside my _JSX_!\n"})}),"\n",(0,o.jsx)(n.p,{children:"Notice how it renders both the markup from your React component and the Markdown syntax:"}),"\n","\n",(0,o.jsxs)(a.Z,{minHeight:240,children:[(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(b,{color:"#25c2a0",children:"Docusaurus green"}),"\n"," ","and ",(0,o.jsx)(b,{color:"#1877F2",children:"Facebook blue"})," are my favorite colors."]}),(0,o.jsxs)(n.p,{children:["I can write ",(0,o.jsx)(n.strong,{children:"Markdown"})," alongside my ",(0,o.jsx)(n.em,{children:"JSX"}),"!"]})]}),"\n",(0,o.jsxs)(n.admonition,{title:"MDX is JSX",type:"warning",children:[(0,o.jsx)(n.p,{children:"Since all doc files are parsed using MDX, anything that looks like HTML is actually JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects."}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:"/* Instead of this: */\n<span style=\"background-color: red\">Foo</span>\n/* Use this: */\n<span style={{backgroundColor: 'red'}}>Foo</span>\n"})})]}),"\n",(0,o.jsx)(n.h3,{id:"importing-components",children:"Importing components"}),"\n",(0,o.jsx)(n.p,{children:"You can also import your own components defined in other files or third-party components installed via npm."}),"\n","\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",children:"\x3c!-- Docusaurus theme component --\x3e\nimport TOCInline from '@theme/TOCInline';\n\x3c!-- External component --\x3e\nimport Button from '@mui/material/Button';\n\x3c!-- Custom component --\x3e\nimport BrowserWindow from '@site/src/components/BrowserWindow';\n"})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"@site"})," alias points to your website's directory, usually where the ",(0,o.jsx)(n.code,{children:"docusaurus.config.js"})," file is. Using an alias instead of relative paths (",(0,o.jsx)(n.code,{children:"'../../src/components/BrowserWindow'"}),") saves you from updating import paths when moving files around, or when ",(0,o.jsx)(n.a,{href:"/docs/versioning",children:"versioning docs"})," and ",(0,o.jsx)(n.a,{href:"/docs/i18n/tutorial",children:"translating"}),"."]})}),"\n",(0,o.jsxs)(n.p,{children:["While declaring components within Markdown is very convenient for simple cases, it becomes hard to maintain because of limited editor support, risks of parsing errors, and low reusability. Use a separate ",(0,o.jsx)(n.code,{children:".js"})," file when your component involves complex JS logic:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",metastring:'title="src/components/Highlight.js"',children:"import React from 'react';\n\nexport default function Highlight({children, color}) {\n return (\n <span\n style={{\n backgroundColor: color,\n borderRadius: '2px',\n color: '#fff',\n padding: '0.2rem',\n }}>\n {children}\n </span>\n );\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="markdown-file.mdx"',children:"import Highlight from '@site/src/components/Highlight';\n\n<Highlight color=\"#25c2a0\">Docusaurus green</Highlight>\n"})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsxs)(n.p,{children:["If you use the same component across a lot of files, you don't need to import it everywhere\u2014consider adding it to the global scope. ",(0,o.jsx)(n.a,{href:"#mdx-component-scope",children:"See below"})]})}),"\n",(0,o.jsx)(n.h3,{id:"mdx-component-scope",children:"MDX component scope"}),"\n",(0,o.jsxs)(n.p,{children:["Apart from ",(0,o.jsx)(n.a,{href:"#importing-components",children:"importing a component"})," and ",(0,o.jsx)(n.a,{href:"#exporting-components",children:"exporting a component"}),", a third way to use a component in MDX is to ",(0,o.jsx)(n.strong,{children:"register it to the global scope"}),", which will make it automatically available in every MDX file, without any import statements."]}),"\n",(0,o.jsx)(n.p,{children:"For example, given this MDX file:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",children:"- a\n- list!\n\nAnd some <Highlight>custom markup</Highlight>...\n"})}),"\n",(0,o.jsxs)(n.p,{children:["It will be compiled to a React component containing ",(0,o.jsx)(n.code,{children:"ul"}),", ",(0,o.jsx)(n.code,{children:"li"}),", ",(0,o.jsx)(n.code,{children:"p"}),", and ",(0,o.jsx)(n.code,{children:"Highlight"})," elements. ",(0,o.jsx)(n.code,{children:"Highlight"})," is not a native html element: you need to provide your own React component implementation for it."]}),"\n",(0,o.jsxs)(n.p,{children:["In Docusaurus, the MDX component scope is provided by the ",(0,o.jsx)(n.code,{children:"@theme/MDXComponents"})," file. It's not a React component, ",(0,o.jsx)(n.em,{children:"per se"}),", unlike most other exports under the ",(0,o.jsx)(n.code,{children:"@theme/"})," alias: it is a record from tag names like ",(0,o.jsx)(n.code,{children:"Highlight"})," to their React component implementations."]}),"\n",(0,o.jsxs)(n.p,{children:["If you ",(0,o.jsx)(n.a,{href:"/docs/swizzling",children:"swizzle"})," this component, you will find all tags that have been implemented, and you can further customize our implementation by swizzling the respective sub-component, like ",(0,o.jsx)(n.code,{children:"@theme/MDXComponents/Code"})," (which is used to render ",(0,o.jsx)(n.a,{href:"/docs/markdown-features/code-blocks",children:"Markdown code blocks"}),")."]}),"\n",(0,o.jsxs)(n.p,{children:["If you want to register extra tag names (like the ",(0,o.jsx)(n.code,{children:"<Highlight>"})," tag above), you should consider ",(0,o.jsxs)(n.a,{href:"/docs/swizzling#wrapping",children:["wrapping ",(0,o.jsx)(n.code,{children:"@theme/MDXComponents"})]}),", so you don't have to maintain all the existing mappings. Since the swizzle CLI doesn't allow wrapping non-component files yet, you should manually create the wrapper:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",metastring:'title="src/theme/MDXComponents.js"',children:"import React from 'react';\n// Import the original mapper\nimport MDXComponents from '@theme-original/MDXComponents';\n// highlight-next-line\nimport Highlight from '@site/src/components/Highlight';\n\nexport default {\n // Re-use the default mapping\n ...MDXComponents,\n // Map the \"<Highlight>\" tag to our Highlight component\n // `Highlight` will receive all props that were passed to `<Highlight>` in MDX\n // highlight-next-line\n Highlight,\n};\n"})}),"\n",(0,o.jsxs)(n.p,{children:["And now, you can freely use ",(0,o.jsx)(n.code,{children:"<Highlight>"})," in every page, without writing the import statement:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",children:'I can conveniently use <Highlight color="#25c2a0">Docusaurus green</Highlight> everywhere!\n'})}),"\n",(0,o.jsx)(a.Z,{children:(0,o.jsxs)(n.p,{children:["I can conveniently use ",(0,o.jsx)(b,{color:"#25c2a0",children:"Docusaurus green"})," everywhere!"]})}),"\n",(0,o.jsxs)(n.admonition,{type:"warning",children:[(0,o.jsxs)(n.p,{children:["We use ",(0,o.jsx)(n.strong,{children:"upper-case"})," tag names like ",(0,o.jsx)(n.code,{children:"Highlight"})," on purpose."]}),(0,o.jsx)(n.p,{children:"From MDX v3+ onward (Docusaurus v3+), lower-case tag names are always rendered as native html elements, and will not use any component mapping you provide."})]}),"\n",(0,o.jsxs)(n.admonition,{type:"warning",children:[(0,o.jsxs)(n.p,{children:["This feature is powered by ",(0,o.jsxs)(n.a,{href:"https://mdxjs.com/docs/using-mdx/#mdx-provider",children:["an ",(0,o.jsx)(n.code,{children:"MDXProvider"})]}),". If you are importing Markdown in a React page, you have to supply this provider yourself through the ",(0,o.jsx)(n.code,{children:"MDXContent"})," theme component."]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/index.js"',children:"import React from 'react';\nimport FeatureDisplay from './_featureDisplay.mdx';\n// highlight-next-line\nimport MDXContent from '@theme/MDXContent';\n\nexport default function LandingPage() {\n return (\n <div>\n {/* highlight-start */}\n <MDXContent>\n <FeatureDisplay />\n </MDXContent>\n {/* highlight-end */}\n </div>\n );\n}\n"})}),(0,o.jsxs)(n.p,{children:["If you don't wrap your imported MDX with ",(0,o.jsx)(n.code,{children:"MDXContent"}),", the global scope will not be available."]})]}),"\n",(0,o.jsx)(n.h3,{id:"markdown-and-jsx-interoperability",children:"Markdown and JSX interoperability"}),"\n",(0,o.jsxs)(n.p,{children:["Docusaurus v3 is using ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/blog/v3/",children:"MDX v3"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/docs/what-is-mdx/#mdx-syntax",children:"MDX syntax"})," is mostly compatible with ",(0,o.jsx)(n.a,{href:"https://commonmark.org/",children:"CommonMark"}),", but is much stricter because your ",(0,o.jsx)(n.code,{children:".mdx"})," files can use JSX and are compiled into real React components (check the ",(0,o.jsx)(n.a,{href:"https://mdxjs.com/playground/",children:"playground"}),")."]}),"\n",(0,o.jsxs)(n.p,{children:["Some valid CommonMark features won't work with MDX (",(0,o.jsx)(n.a,{href:"https://mdxjs.com/docs/what-is-mdx/#markdown",children:"more info"}),"), notably:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Indented code blocks: use triple backticks instead"}),"\n",(0,o.jsxs)(n.li,{children:["Autolinks (",(0,o.jsx)(n.code,{children:"<http://localhost:3000>"}),"): use regular link syntax instead (",(0,o.jsx)(n.code,{children:"[http://localhost:3000](http://localhost:3000)"}),")"]}),"\n",(0,o.jsxs)(n.li,{children:["HTML syntax (",(0,o.jsx)(n.code,{children:'<p style="color: red;">'}),"): use JSX instead (",(0,o.jsx)(n.code,{children:"<p style={{color: 'red'}}>"}),")"]}),"\n",(0,o.jsxs)(n.li,{children:["Unescaped ",(0,o.jsx)(n.code,{children:"{"})," and ",(0,o.jsx)(n.code,{children:"<"}),": escape them with ",(0,o.jsx)(n.code,{children:"\\"})," instead (",(0,o.jsx)(n.code,{children:"\\{"})," and ",(0,o.jsx)(n.code,{children:"\\<"}),")"]}),"\n"]}),"\n",(0,o.jsxs)(n.admonition,{title:"Experimental CommonMark support",type:"danger",children:[(0,o.jsxs)(n.p,{children:["Docusaurus v3 makes it possible to opt-in for a less strict, standard ",(0,o.jsx)(n.a,{href:"https://commonmark.org/",children:"CommonMark"})," support with the following options:"]}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["The ",(0,o.jsx)(n.code,{children:"format: md"})," front matter"]}),"\n",(0,o.jsxs)(n.li,{children:["The ",(0,o.jsx)(n.code,{children:".md"})," file extension combined with the ",(0,o.jsx)(n.code,{children:'siteConfig.markdown.format: "detect"'})," configuration"]}),"\n"]}),(0,o.jsxs)(n.p,{children:["This feature is ",(0,o.jsx)(n.strong,{children:"experimental"})," and currently has a few ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/9092",children:"limitations"}),"."]})]}),"\n",(0,o.jsx)(n.h2,{id:"importing-code-snippets",children:"Importing code snippets"}),"\n",(0,o.jsxs)(n.p,{children:["You can not only import a file containing a component definition, but also import any code file as raw text, and then insert it in a code block, thanks to ",(0,o.jsx)(n.a,{href:"https://webpack.js.org/loaders/raw-loader/",children:"Webpack raw-loader"}),". In order to use ",(0,o.jsx)(n.code,{children:"raw-loader"}),", you first need to install it in your project:"]}),"\n",(0,o.jsxs)(c.Z,{groupId:"npm2yarn",children:[(0,o.jsx)(s.Z,{value:"npm",children:(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"npm install --save raw-loader\n"})})}),(0,o.jsx)(s.Z,{value:"yarn",label:"Yarn",children:(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"yarn add raw-loader\n"})})}),(0,o.jsx)(s.Z,{value:"pnpm",label:"pnpm",children:(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"pnpm add raw-loader\n"})})})]}),"\n",(0,o.jsx)(n.p,{children:"Now you can import code snippets from another file as it is:"}),"\n","\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",metastring:'title="myMarkdownFile.mdx"',children:"import CodeBlock from '@theme/CodeBlock';\nimport MyComponentSource from '!!raw-loader!./myComponent';\n\n<CodeBlock language=\"jsx\">{MyComponentSource}</CodeBlock>\n"})}),"\n","\n",(0,o.jsx)(a.Z,{children:(0,o.jsx)(l.Z,{language:"jsx",children:u.Z})}),"\n",(0,o.jsxs)(n.p,{children:["See ",(0,o.jsx)(n.a,{href:"/docs/markdown-features/code-blocks#usage-in-jsx",children:"using code blocks in JSX"})," for more details of the ",(0,o.jsx)(n.code,{children:"<CodeBlock>"})," component."]}),"\n",(0,o.jsx)(n.admonition,{type:"note",children:(0,o.jsxs)(n.p,{children:["You have to use ",(0,o.jsx)(n.code,{children:"<CodeBlock>"})," rather than the Markdown triple-backtick ",(0,o.jsx)(n.code,{children:"```"}),", because the latter will ship out any of its content as-is, but you want to interpolate the imported text here."]})}),"\n",(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsx)(n.p,{children:"This feature is experimental and might be subject to breaking API changes in the future."})}),"\n",(0,o.jsx)(n.h2,{id:"importing-markdown",children:"Importing Markdown"}),"\n",(0,o.jsxs)(n.p,{children:["You can use Markdown files as components and import them elsewhere, either in Markdown files or in React pages. Each MDX file default-exports its page content as a React component. In the ",(0,o.jsx)(n.code,{children:"import"})," statement, you can default-import this component with any name, but it must be capitalized following React's naming rules."]}),"\n",(0,o.jsxs)(n.p,{children:["By convention, using the ",(0,o.jsxs)(n.strong,{children:[(0,o.jsx)(n.code,{children:"_"})," filename prefix"]})," will not create any doc page and means the Markdown file is a ",(0,o.jsx)(n.strong,{children:'"partial"'}),", to be imported by other files."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-md",metastring:'title="_markdown-partial-example.mdx"',children:"<span>Hello {props.name}</span>\n\nThis is text some content from `_markdown-partial-example.mdx`.\n"})}),"\n","\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",metastring:'title="someOtherDoc.mdx"',children:"import PartialExample from './_markdown-partial-example.mdx';\n\n<PartialExample name=\"Sebastien\" />\n"})}),"\n","\n",(0,o.jsx)(a.Z,{children:(0,o.jsx)(p,{name:"Sebastien"})}),"\n",(0,o.jsx)(n.p,{children:"This way, you can reuse content among multiple pages and avoid duplicating materials."}),"\n",(0,o.jsx)(n.h2,{id:"available-exports",children:"Available exports"}),"\n",(0,o.jsx)(n.p,{children:"Within the MDX page, the following variables are available as globals:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"frontMatter"}),": the front matter as a record of string keys and values;"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"toc"}),": the table of contents, as a tree of headings. See also ",(0,o.jsx)(n.a,{href:"/docs/markdown-features/toc#inline-table-of-contents",children:"Inline TOC"})," for a more concrete use-case."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"contentTitle"}),": the Markdown title, which is the first ",(0,o.jsx)(n.code,{children:"h1"})," heading in the Markdown text. It's ",(0,o.jsx)(n.code,{children:"undefined"})," if there isn't one (e.g. title specified in the front matter)."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:"import TOCInline from '@theme/TOCInline';\nimport CodeBlock from '@theme/CodeBlock';\n\nThe table of contents for this page, serialized:\n\n<CodeBlock className=\"language-json\">{JSON.stringify(toc, null, 2)}</CodeBlock>\n\nThe front matter of this page:\n\n<ul>\n {Object.entries(frontMatter).map(([key, value]) => <li key={key}><b>{key}</b>: {value}</li>)}\n</ul>\n\n<p>The title of this page is: <b>{contentTitle}</b></p>\n"})}),"\n","\n",(0,o.jsxs)(a.Z,{children:[(0,o.jsx)(n.p,{children:"The table of contents for this page, serialized:"}),(0,o.jsx)(l.Z,{className:"language-json",children:JSON.stringify(g,null,2)}),(0,o.jsx)(n.p,{children:"The front matter of this page:"}),(0,o.jsx)("ul",{children:Object.entries(f).map(([e,t])=>(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.b,{children:e}),": ",t]},e))}),(0,o.jsxs)("p",{children:["The title of this page is: ",(0,o.jsx)("b",{children:h})]})]})]})}function j(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(y,{...e})}):y(e)}},78596:function(e,n,t){t.d(n,{Z:()=>a});var r=t("24246");t("27378");var o=t("89477");let i="tableOfContentsInline_2sru";function a(e){var n=e.toc,t=e.minHeadingLevel,a=e.maxHeadingLevel;return(0,r.jsx)("div",{className:i,children:(0,r.jsx)(o.Z,{toc:n,minHeadingLevel:t,maxHeadingLevel:a,className:"table-of-contents",linkClassName:null})})}},89477:function(e,n,t){t.d(n,{Z:()=>p});var r=t("24246"),o=t("27378"),i=t("26378");function a(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}function s(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}),e}function l(e){var n=e.getBoundingClientRect();return n.top===n.bottom?l(e.parentNode):n}var u=t("35363");let d=o.memo(function e(n){var t=n.toc,o=n.className,i=n.linkClassName,a=n.isChild;return t.length?(0,r.jsx)("ul",{className:a?void 0:o,children:t.map(function(n){return(0,r.jsxs)("li",{children:[(0,r.jsx)(u.Z,{to:"#".concat(n.id),className:null!=i?i:void 0,dangerouslySetInnerHTML:{__html:n.value}}),(0,r.jsx)(e,{isChild:!0,toc:n.children,className:o,linkClassName:i})]},n.id)})}):null});function p(e){var n,t,u,p,f,h,m,b,g,y=e.toc,j=e.className,v=e.linkClassName,x=void 0===v?"table-of-contents__link":v,O=e.linkActiveClassName,w=void 0===O?void 0:O,k=e.minHeadingLevel,P=e.maxHeadingLevel,S=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],!(n.indexOf(t)>=0)&&(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++){if(t=i[r],!(n.indexOf(t)>=0))Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}return o}(e,["toc","className","linkClassName","linkActiveClassName","minHeadingLevel","maxHeadingLevel"]),D=(0,i.L)(),C=null!=k?k:D.tableOfContents.minHeadingLevel,N=null!=P?P:D.tableOfContents.maxHeadingLevel;var M=(t=(n={toc:y,minHeadingLevel:C,maxHeadingLevel:N}).toc,u=n.minHeadingLevel,p=n.maxHeadingLevel,(0,o.useMemo)(function(){var e,n,r;return function e(n){var t=n.toc,r=n.minHeadingLevel,o=n.maxHeadingLevel;return t.flatMap(function(n){var t,i=e({toc:n.children,minHeadingLevel:r,maxHeadingLevel:o});return(t=n).level>=r&&t.level<=o?[s(c({},n),{children:i})]:i})}({toc:(e=t.map(function(e){return s(c({},e),{parentIndex:-1,children:[]})}),n=Array(7).fill(-1),e.forEach(function(e,t){var r,o,i=n.slice(2,e.level);e.parentIndex=(o=Math).max.apply(o,function(e){if(Array.isArray(e))return a(e)}(r=i)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(r)||function(e,n){if(e){if("string"==typeof e)return a(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);if("Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return a(e,n)}}(r)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),n[e.level]=t}),r=[],e.forEach(function(n){var t=n.parentIndex,o=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],!(n.indexOf(t)>=0)&&(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++){if(t=i[r],!(n.indexOf(t)>=0))Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}return o}(n,["parentIndex"]);t>=0?e[t].children.push(o):r.push(o)}),r),minHeadingLevel:u,maxHeadingLevel:p})},[t,u,p]));return f=(0,o.useMemo)(function(){if(x&&w)return{linkClassName:x,linkActiveClassName:w,minHeadingLevel:C,maxHeadingLevel:N}},[x,w,C,N]),h=(0,o.useRef)(void 0),g=(m=(0,o.useRef)(0),b=(0,i.L)().navbar.hideOnScroll,(0,o.useEffect)(function(){m.current=b?0:document.querySelector(".navbar").clientHeight},[b]),m),(0,o.useEffect)(function(){var e=function(e,n){n?(h.current&&h.current!==e&&h.current.classList.remove(r),e.classList.add(r),h.current=e):e.classList.remove(r)},n=function(){var n,r=(n=t,Array.from(document.getElementsByClassName(n))),a=function(e,n){var t,r,o,i=n.anchorTopOffset,a=e.find(function(e){return l(e).top>=i});if(a){;return(r=l(a)).top>0&&r.bottom<window.innerHeight/2?a:null!==(t=e[e.indexOf(a)-1])&&void 0!==t?t:null}return null!==(o=e[e.length-1])&&void 0!==o?o:null}(function(e){for(var n=e.minHeadingLevel,t=e.maxHeadingLevel,r=[],o=n;o<=t;o+=1)r.push("h".concat(o,".anchor"));return Array.from(document.querySelectorAll(r.join()))}({minHeadingLevel:o,maxHeadingLevel:i}),{anchorTopOffset:g.current}),c=r.find(function(e){var n;return a&&a.id===decodeURIComponent((n=e).href.substring(n.href.indexOf("#")+1))});r.forEach(function(n){e(n,n===c)})};if(!f)return function(){};var t=f.linkClassName,r=f.linkActiveClassName,o=f.minHeadingLevel,i=f.maxHeadingLevel;return document.addEventListener("scroll",n),document.addEventListener("resize",n),n(),function(){document.removeEventListener("scroll",n),document.removeEventListener("resize",n)}},[f,g]),(0,r.jsx)(d,function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({toc:M,className:void 0===j?"table-of-contents table-of-contents__left-border":j,linkClassName:x},S))}},58636:function(e,n,t){t.d(n,{Z:()=>a});var r=t("24246");t("27378");var o=t("90496");let i="tabItem_pnkT";function a(e){var n=e.children,t=e.hidden,a=e.className;return(0,r.jsx)("div",{role:"tabpanel",className:(0,o.Z)(i,a),hidden:t,children:n})}},15398:function(e,n,t){t.d(n,{Z:()=>k});var r=t("24246"),o=t("27378"),i=t("90496"),a=t("54947"),c=t("3620"),s=t("844"),l=t("97486"),u=t("32263"),d=t("16971");function p(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function f(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t,r,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var i=[],a=!0,c=!1;try{for(o=o.call(e);!(a=(t=o.next()).done)&&(i.push(t.value),!n||i.length!==n);a=!0);}catch(e){c=!0,r=e}finally{try{!a&&null!=o.return&&o.return()}finally{if(c)throw r}}return i}}(e,n)||function(e,n){if(e){if("string"==typeof e)return p(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);if("Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return p(e,n)}}(e,n)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function h(e){var n,t;return null!==(t=null===(n=o.Children.toArray(e).filter(function(e){return"\n"!==e}).map(function(e){var n,t;if(!e||(0,o.isValidElement)(e)&&(n=e.props)&&(void 0===n?"undefined":(t=n)&&"undefined"!=typeof Symbol&&t.constructor===Symbol?"symbol":typeof t)=="object"&&"value"in n)return e;throw Error("Docusaurus error: Bad <Tabs> child <".concat("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.'))}))||void 0===n?void 0:n.filter(Boolean))&&void 0!==t?t:[]}function m(e){var n=e.value;return e.tabValues.some(function(e){return e.value===n})}var b=t("71607");let g="tabList_Qoir",y="tabItem_AQgk";function j(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}function v(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}),e}function x(e){var n=e.className,t=e.block,o=e.selectedValue,c=e.selectValue,s=e.tabValues,l=[],u=(0,a.o5)().blockElementScrollPositionUntilNextRender,d=function(e){var n=e.currentTarget,t=s[l.indexOf(n)].value;t!==o&&(u(n),c(t))},p=function(e){var n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":var t,r=l.indexOf(e.currentTarget)+1;n=null!==(t=l[r])&&void 0!==t?t:l[0];break;case"ArrowLeft":var o,i=l.indexOf(e.currentTarget)-1;n=null!==(o=l[i])&&void 0!==o?o:l[l.length-1]}null==n||n.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":t},n),children:s.map(function(e){var n=e.value,t=e.label,a=e.attributes;return(0,r.jsx)("li",v(j({role:"tab",tabIndex:o===n?0:-1,"aria-selected":o===n,ref:function(e){return l.push(e)},onKeyDown:p,onClick:d},a),{className:(0,i.Z)("tabs__item",y,null==a?void 0:a.className,{"tabs__item--active":o===n}),children:null!=t?t:n}),n)})})}function O(e){var n=e.lazy,t=e.children,a=e.selectedValue,c=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){var s=c.find(function(e){return e.props.value===a});return s?(0,o.cloneElement)(s,{className:(0,i.Z)("margin-top--md",s.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:c.map(function(e,n){return(0,o.cloneElement)(e,{key:n,hidden:e.props.value!==a})})})}function w(e){var n=function(e){var n,t,r,i,a,p,b,g,y,j,v,x,O,w,k=e.defaultValue,P=e.queryString,S=e.groupId;var D=(t=(n=e).values,r=n.children,(0,o.useMemo)(function(){var e=null!=t?t:h(r).map(function(e){var n=e.props;return{value:n.value,label:n.label,attributes:n.attributes,default:n.default}});return!function(e){var n=(0,u.lx)(e,function(e,n){return e.value===n.value});if(n.length>0)throw Error('Docusaurus error: Duplicate values "'.concat(n.map(function(e){return e.value}).join(", "),'" found in <Tabs>. Every value needs to be unique.'))}(e),e},[t,r])),C=f((0,o.useState)(function(){return function(e){var n,t=e.defaultValue,r=e.tabValues;if(0===r.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!m({value:t,tabValues:r}))throw Error('Docusaurus error: The <Tabs> has a defaultValue "'.concat(t,'" but none of its children has the corresponding value. Available values are: ').concat(r.map(function(e){return e.value}).join(", "),". If you intend to show no default tab, use defaultValue={null} instead."));return t}var o=null!==(n=r.find(function(e){return e.default}))&&void 0!==n?n:r[0];if(!o)throw Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:k,tabValues:D})}),2),N=C[0],M=C[1];var E=f((a=(i={queryString:void 0!==P&&P,groupId:S}).queryString,p=i.groupId,b=(0,c.k6)(),g=function(e){var n=e.queryString,t=void 0!==n&&n,r=e.groupId;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!r)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 null!=r?r:null}({queryString:void 0!==a&&a,groupId:p}),[(0,l._X)(g),(0,o.useCallback)(function(e){if(!!g){var n,t,r=new URLSearchParams(b.location.search);r.set(g,e),b.replace((n=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({},b.location),t=(t={search:r.toString()},t),Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n))}},[g,b])]),2),I=E[0],L=E[1];var B=f((j=(y=({groupId:S}).groupId)?"docusaurus.tab.".concat(y):null,x=(v=f((0,d.Nk)(j),2))[0],O=v[1],[x,(0,o.useCallback)(function(e){if(!!j)O.set(e)},[j,O])]),2),H=B[0],T=B[1];var A=m({value:w=null!=I?I:H,tabValues:D})?w:null;return(0,s.Z)(function(){A&&M(A)},[A]),{selectedValue:N,selectValue:(0,o.useCallback)(function(e){if(!m({value:e,tabValues:D}))throw Error("Can't select invalid tab value=".concat(e));M(e),L(e),T(e)},[L,T,D]),tabValues:D}}(e);return(0,r.jsxs)("div",{className:(0,i.Z)("tabs-container",g),children:[(0,r.jsx)(x,j({},n,e)),(0,r.jsx)(O,j({},n,e))]})}function k(e){var n=(0,b.Z)();return(0,r.jsx)(w,v(j({},e),{children:h(e.children)}),String(n))}},56497:function(e,n,t){t.d(n,{Z:function(){return i}});var r=t(24246);t(27378);var o=t(71607);function i(e){var n=e.children,t=e.fallback;return(0,o.Z)()?(0,r.jsx)(r.Fragment,{children:null==n?void 0:n()}):null!=t?t:null}},14522:function(e,n,t){t.d(n,{Z:()=>f});var r=t("24246");t("27378");var o=t("90496");let i="browserWindow_my1Q",a="browserWindowHeader_jXSR",c="buttons_uHc7",s="browserWindowAddressBar_Pd8y",l="dot_giz1",u="browserWindowMenuIcon_Vhuh",d="bar_rrRL",p="browserWindowBody_Idgs";function f(e){var n,t,f=e.children,h=e.minHeight,m=e.url,b=e.style,g=e.bodyStyle;return(0,r.jsxs)("div",{className:i,style:(n=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({},b),t=(t={minHeight:h},t),Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n),children:[(0,r.jsxs)("div",{className:a,children:[(0,r.jsxs)("div",{className:c,children:[(0,r.jsx)("span",{className:l,style:{background:"#f25f58"}}),(0,r.jsx)("span",{className:l,style:{background:"#fbbe3c"}}),(0,r.jsx)("span",{className:l,style:{background:"#58cb42"}})]}),(0,r.jsx)("div",{className:(0,o.Z)(s,"text--truncate"),children:void 0===m?"http://localhost:3000":m}),(0,r.jsx)("div",{className:u,children:(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:d}),(0,r.jsx)("span",{className:d}),(0,r.jsx)("span",{className:d})]})})]}),(0,r.jsx)("div",{className:p,style:g,children:f})]})}},95998:function(e,n,t){t.d(n,{Z:()=>eg});var r,o,i,a={};t.r(a),t.d(a,{ButtonExample:()=>B});var c=t("24246"),s=t("27378"),l=t("90496"),u=t("71607"),d=t("10075"),p=t("77827"),f=t("8156"),h=t("56497"),m=t("85108"),b=t("45245"),g=t("26378");function y(){var e=(0,g.L)().prism,n=(0,b.I)().colorMode,t=e.theme,r=e.darkTheme||t;return"dark"===n?r:t}var j=t("67490");let v="playgroundContainer_6Ior",x="playgroundHeader_Tvsk",O="playgroundEditor_TySg",w="playgroundPreview_mApW";function k(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}function P(e){var n=e.children;return(0,c.jsx)("div",{className:(0,l.Z)(x),children:n})}function S(){return(0,c.jsx)("div",{children:"Loading..."})}function D(){return(0,c.jsx)(h.Z,{fallback:(0,c.jsx)(S,{}),children:function(){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(j.Z,{fallback:function(e){return(0,c.jsx)(m.Ac,k({},e))},children:(0,c.jsx)(d.i5,{})}),(0,c.jsx)(d.IF,{})]})}})}function C(){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(P,{children:(0,c.jsx)(p.Z,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,c.jsx)("div",{className:w,children:(0,c.jsx)(D,{})})]})}function N(){var e=(0,u.Z)();return(0,c.jsx)(d.uz,{className:O},String(e))}function M(){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(P,{children:(0,c.jsx)(p.Z,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,c.jsx)(N,{})]})}var E=function(e){return"".concat(e,";")};function I(e){var n,t,r,o,i=e.children,a=e.transformCode,s=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],!(n.indexOf(t)>=0)&&(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++){if(t=i[r],!(n.indexOf(t)>=0))Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}return o}(e,["children","transformCode"]),l=(0,f.Z)().siteConfig.themeConfig.liveCodeBlock.playgroundPosition,u=y(),p=null!==(o=null===(r=s.metastring)||void 0===r?void 0:r.includes("noInline"))&&void 0!==o&&o;return(0,c.jsx)("div",{className:v,children:(0,c.jsx)(d.nu,(n=k({code:null==i?void 0:i.replace(/\n$/,""),noInline:p,transformCode:null!=a?a:E,theme:u},s),t=(t={children:"top"===l?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(C,{}),(0,c.jsx)(M,{})]}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(M,{}),(0,c.jsx)(C,{})]})},t),Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n))})}function L(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}function B(e){var n,t;return(0,c.jsx)("button",(n=L({type:"button"},e),t=(t={style:L({backgroundColor:"white",color:"black",border:"solid red",borderRadius:20,padding:10,cursor:"pointer"},e.style)},t),Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n))}let H=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({React:s},s,a);var T=t("55951"),A=t("6324"),X=t.n(A);function _(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function Z(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t,r,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var i=[],a=!0,c=!1;try{for(o=o.call(e);!(a=(t=o.next()).done)&&(i.push(t.value),!n||i.length!==n);a=!0);}catch(e){c=!0,r=e}finally{try{!a&&null!=o.return&&o.return()}finally{if(c)throw r}}return i}}(e,n)||function(e,n){if(e){if("string"==typeof e)return _(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);if("Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return _(e,n)}}(e,n)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var R=RegExp("title=(?<quote>[\"'])(?<title>.*?)\\1"),V=RegExp("\\{(?<range>[\\d,-]+)\\}"),F={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}};var W=(r=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({},F),o=(o={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:""}},o),Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(o)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}),r),z=Object.keys(F);function U(e,n){var t=e.map(function(e){var t=W[e],r=t.start,o=t.end;return"(?:".concat(r,"\\s*(").concat(n.flatMap(function(e){var n,t;return[e.line,null===(n=e.block)||void 0===n?void 0:n.start,null===(t=e.block)||void 0===t?void 0:t.end].filter(Boolean)}).join("|"),")\\s*").concat(o,")")}).join("|");return new RegExp("^\\s*(?:".concat(t,")\\s*$"))}let q="codeBlockContainer_jDV4";function J(e){var n,t,r,o,i=e.as,a=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],!(n.indexOf(t)>=0)&&(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++){if(t=i[r],!(n.indexOf(t)>=0))Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}return o}(e,["as"]);var s=(n={color:"--prism-color",backgroundColor:"--prism-background-color"},t={},Object.entries(y().plain).forEach(function(e){var r=Z(e,2),o=r[0],i=r[1],a=n[o];a&&"string"==typeof i&&(t[a]=i)}),t);return(0,c.jsx)(i,(r=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({},a),o=(o={style:s,className:(0,l.Z)(a.className,q,T.k.common.codeBlock)},o),Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(o)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}),r))}let $={codeBlockContent:"codeBlockContent_vx7S",codeBlockTitle:"codeBlockTitle_bdru",codeBlock:"codeBlock_Gebt",codeBlockStandalone:"codeBlockStandalone_i_cY",codeBlockLines:"codeBlockLines_FJaf",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_FU9Q",buttonGroup:"buttonGroup_cUGO"};function Q(e){var n=e.children,t=e.className;return(0,c.jsx)(J,{as:"pre",tabIndex:0,className:(0,l.Z)($.codeBlockStandalone,"thin-scrollbar",t),children:(0,c.jsx)("code",{className:$.codeBlockLines,children:n})})}var Y=t("50923"),G={attributes:!0,characterData:!0,childList:!0,subtree:!0};function K(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function ee(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t,r,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var i=[],a=!0,c=!1;try{for(o=o.call(e);!(a=(t=o.next()).done)&&(i.push(t.value),!n||i.length!==n);a=!0);}catch(e){c=!0,r=e}finally{try{!a&&null!=o.return&&o.return()}finally{if(c)throw r}}return i}}(e,n)||function(e,n){if(e){if("string"==typeof e)return K(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);if("Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return K(e,n)}}(e,n)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var en=t("7316");let et={codeLine:"codeLine_qRmp",codeLineNumber:"codeLineNumber_dS_J",codeLineContent:"codeLineContent_XF5l"};function er(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}function eo(e){var n,t,r=e.line,o=e.classNames,i=e.showLineNumbers,a=e.getLineProps,s=e.getTokenProps;1===r.length&&"\n"===r[0].content&&(r[0].content="");var u=a({line:r,className:(0,l.Z)(o,i&&et.codeLine)}),d=r.map(function(e,n){return(0,c.jsx)("span",er({},s({token:e})),n)});return(0,c.jsxs)("span",(n=er({},u),t=(t={children:[i?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("span",{className:et.codeLineNumber}),(0,c.jsx)("span",{className:et.codeLineContent,children:d})]}):d,(0,c.jsx)("br",{})]},t),Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n))}var ei=t("44771");function ea(e){var n,t;return(0,c.jsx)("svg",(n=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({viewBox:"0 0 24 24"},e),t=(t={children:(0,c.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),Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n))}function ec(e){var n,t;return(0,c.jsx)("svg",(n=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({viewBox:"0 0 24 24"},e),t=(t={children:(0,c.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})},t),Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n))}let es={copyButtonCopied:"copyButtonCopied_OkN_",copyButtonIcons:"copyButtonIcons_OqsO",copyButtonIcon:"copyButtonIcon_PgCn",copyButtonSuccessIcon:"copyButtonSuccessIcon_bsQG"};function el(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function eu(e){var n,t,r=e.code,o=e.className;var i=(n=(0,s.useState)(!1),t=2,function(e){if(Array.isArray(e))return e}(n)||function(e,n){var t,r,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var i=[],a=!0,c=!1;try{for(o=o.call(e);!(a=(t=o.next()).done)&&(i.push(t.value),!n||i.length!==n);a=!0);}catch(e){c=!0,r=e}finally{try{!a&&null!=o.return&&o.return()}finally{if(c)throw r}}return i}}(n,2)||function(e,n){if(e){if("string"==typeof e)return el(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);if("Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return el(e,n)}}(n,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),a=i[0],u=i[1],d=(0,s.useRef)(void 0),f=(0,s.useCallback)(function(){(0,ei.Z)(r),u(!0),d.current=window.setTimeout(function(){u(!1)},1e3)},[r]);return(0,s.useEffect)(function(){return function(){return window.clearTimeout(d.current)}},[]),(0,c.jsx)("button",{type:"button","aria-label":a?(0,p.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,p.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,p.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,l.Z)("clean-btn",o,es.copyButton,a&&es.copyButtonCopied),onClick:f,children:(0,c.jsxs)("span",{className:es.copyButtonIcons,"aria-hidden":"true",children:[(0,c.jsx)(ea,{className:es.copyButtonIcon}),(0,c.jsx)(ec,{className:es.copyButtonSuccessIcon})]})})}function ed(e){var n,t;return(0,c.jsx)("svg",(n=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({viewBox:"0 0 24 24"},e),t=(t={children:(0,c.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),Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}),n))}let ep={wordWrapButtonIcon:"wordWrapButtonIcon_MQXS",wordWrapButtonEnabled:"wordWrapButtonEnabled_TBIH"};function ef(e){var n=e.className,t=e.onClick,r=e.isEnabled,o=(0,p.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,c.jsx)("button",{type:"button",onClick:t,className:(0,l.Z)("clean-btn",n,r&&ep.wordWrapButtonEnabled),"aria-label":o,title:o,children:(0,c.jsx)(ed,{className:ep.wordWrapButtonIcon,"aria-hidden":"true"})})}function eh(e){var n,t,r,o,i,a,u,d,p,f,h,m,b,j,v,x,O,w,k,P,S,D,C=e.children,N=e.className,M=void 0===N?"":N,E=e.metastring,I=e.title,L=e.showLineNumbers,B=e.language,H=(0,g.L)().prism,T=H.defaultLanguage,A=H.magicComments;var _=null==(t=null!==(D=null!=B?B:null==(n=M.split(" ").find(function(e){return e.startsWith("language-")}))?void 0:n.replace(/language-/,""))&&void 0!==D?D:T)?void 0:t.toLowerCase(),F=y();var W=(o=(r=ee((0,s.useState)(!1),2))[0],i=r[1],u=(a=ee((0,s.useState)(!1),2))[0],d=a[1],p=(0,s.useRef)(null),f=(0,s.useCallback)(function(){var e=p.current.querySelector("code");o?e.removeAttribute("style"):(e.style.whiteSpace="pre-wrap",e.style.overflowWrap="anywhere"),i(function(e){return!e})},[p,o]),h=(0,s.useCallback)(function(){var e=p.current;d(e.scrollWidth>e.clientWidth||p.current.querySelector("code").hasAttribute("style"))},[p]),m=p,b=h,v=(j=ee((0,s.useState)(),2))[0],x=j[1],O=(0,s.useCallback)(function(){var e;x(null===(e=m.current)||void 0===e?void 0:e.closest("[role=tabpanel][hidden]"))},[m,x]),(0,s.useEffect)(function(){O()},[O]),function(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:G,r=(0,Y.zX)(n),o=(0,Y.Ql)(t);(0,s.useEffect)(function(){var n=new MutationObserver(r);return e&&n.observe(e,o),function(){return n.disconnect()}},[e,r,o])}(v,function(e){e.forEach(function(e){"attributes"===e.type&&"hidden"===e.attributeName&&(b(),O())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1}),(0,s.useEffect)(function(){h()},[o,h]),(0,s.useEffect)(function(){return window.addEventListener("resize",h,{passive:!0}),function(){window.removeEventListener("resize",h)}},[h]),{codeBlockRef:p,isEnabled:o,isCodeScrollable:u,toggle:f});var q=(null!==(P=null==(w=E)?void 0:null===(k=w.match(R))||void 0===k?void 0:k.groups.title)&&void 0!==P?P:"")||I,Q=function(e,n){var t=e.replace(/\n$/,""),r=n.language,o=n.magicComments,i=n.metastring;if(i&&V.test(i)){var a=i.match(V).groups.range;if(0===o.length)throw Error("A highlight range has been given in code block's metastring (``` ".concat(i,"), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges."));var c=o[0].className;return{lineClassNames:Object.fromEntries(X()(a).filter(function(e){return e>0}).map(function(e){return[e-1,[c]]})),code:t}}if(void 0===r)return{lineClassNames:{},code:t};for(var s=function(e,n){switch(e){case"js":case"javascript":case"ts":case"typescript":return U(["js","jsBlock"],n);case"jsx":case"tsx":return U(["js","jsBlock","jsx"],n);case"html":return U(["js","jsBlock","html"],n);case"python":case"py":case"bash":return U(["bash"],n);case"markdown":case"md":return U(["html","jsx","bash"],n);case"tex":case"latex":case"matlab":return U(["tex"],n);case"lua":case"haskell":case"sql":return U(["lua"],n);case"wasm":return U(["wasm"],n);case"vb":case"vba":case"visual-basic":return U(["vb","rem"],n);case"vbnet":return U(["vbnet","rem"],n);case"batch":return U(["rem"],n);case"basic":return U(["rem","f90"],n);case"fsharp":return U(["js","ml"],n);case"ocaml":case"sml":return U(["ml"],n);case"fortran":return U(["f90"],n);case"cobol":return U(["cobol"],n);default:return U(z,n)}}(r,o),l=t.split("\n"),u=Object.fromEntries(o.map(function(e){return[e.className,{start:0,range:""}]})),d=Object.fromEntries(o.filter(function(e){return e.line}).map(function(e){var n=e.className;return[e.line,n]})),p=Object.fromEntries(o.filter(function(e){return e.block}).map(function(e){var n=e.className;return[e.block.start,n]})),f=Object.fromEntries(o.filter(function(e){return e.block}).map(function(e){var n=e.className;return[e.block.end,n]})),h=0;h<l.length;){var m=l[h].match(s);if(!m){h+=1;continue}var b=m.slice(1).find(function(e){return void 0!==e});d[b]?u[d[b]].range+="".concat(h,","):p[b]?u[p[b]].start=h:f[b]&&(u[f[b]].range+="".concat(u[f[b]].start,"-").concat(h-1,",")),l.splice(h,1)}t=l.join("\n");var g={};return Object.entries(u).forEach(function(e){var n=Z(e,2),t=n[0],r=n[1].range;X()(r).forEach(function(e){var n;null!==(n=g[e])&&void 0!==n||(g[e]=[]),g[e].push(t)})}),{lineClassNames:g,code:t}}(C,{metastring:E,language:_,magicComments:A}),K=Q.lineClassNames,et=Q.code;var er=null!=L?L:!!(null==(S=E)?void 0:S.includes("showLineNumbers"));return(0,c.jsxs)(J,{as:"div",className:(0,l.Z)(M,_&&!M.includes("language-".concat(_))&&"language-".concat(_)),children:[q&&(0,c.jsx)("div",{className:$.codeBlockTitle,children:q}),(0,c.jsxs)("div",{className:$.codeBlockContent,children:[(0,c.jsx)(en.y$,{theme:F,code:et,language:null!=_?_:"text",children:function(e){var n=e.className,t=e.style,r=e.tokens,o=e.getLineProps,i=e.getTokenProps;return(0,c.jsx)("pre",{tabIndex:0,ref:W.codeBlockRef,className:(0,l.Z)(n,$.codeBlock,"thin-scrollbar"),style:t,children:(0,c.jsx)("code",{className:(0,l.Z)($.codeBlockLines,er&&$.codeBlockLinesWithNumbering),children:r.map(function(e,n){return(0,c.jsx)(eo,{line:e,getLineProps:o,getTokenProps:i,classNames:K[n],showLineNumbers:er},n)})})})}}),(0,c.jsxs)("div",{className:$.buttonGroup,children:[(W.isEnabled||W.isCodeScrollable)&&(0,c.jsx)(ef,{className:$.codeButton,onClick:function(){return W.toggle()},isEnabled:W.isEnabled}),(0,c.jsx)(eu,{className:$.codeButton,code:et})]})]})]})}function em(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}let eb=(i=function(e){var n,t,r,o=e.children,i=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],!(n.indexOf(t)>=0)&&(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++){if(t=i[r],!(n.indexOf(t)>=0))Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}return o}(e,["children"]),a=(0,u.Z)();var l=(n=o,s.Children.toArray(n).some(function(e){return(0,s.isValidElement)(e)})?n:Array.isArray(n)?n.join(""):n),d="string"==typeof l?eh:Q;return(0,c.jsx)(d,(t=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({},i),r=(r={children:l},r),Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}),t),String(a))},function(e){return e.live?(0,c.jsx)(I,em({scope:H},e)):(0,c.jsx)(i,em({},e))});function eg(e){return(0,c.jsx)(eb,function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r,o,i;r=e,o=n,i=t[n],o in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})}return e}({},e))}}}]);
Reference in a new issue View git blame Copy permalink