"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["51698"],{62163:function(e,n,s){s.r(n),s.d(n,{metadata:()=>t,contentTitle:()=>h,default:()=>p,assets:()=>u,toc:()=>g,frontMatter:()=>d});var t=JSON.parse('{"id":"guides/markdown-features/code-blocks","title":"Code blocks","description":"Handling code blocks in Docusaurus Markdown","source":"@site/docs/guides/markdown-features/markdown-features-code-blocks.mdx","sourceDirName":"guides/markdown-features","slug":"/markdown-features/code-blocks","permalink":"/docs/markdown-features/code-blocks","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx","tags":[],"version":"current","lastUpdatedBy":"Jake Boone","lastUpdatedAt":1735903165000,"frontMatter":{"id":"code-blocks","description":"Handling code blocks in Docusaurus Markdown","slug":"/markdown-features/code-blocks"},"sidebar":"docs","previous":{"title":"Tabs","permalink":"/docs/markdown-features/tabs"},"next":{"title":"Admonitions","permalink":"/docs/markdown-features/admonitions"}}'),r=s("85893"),i=s("80980"),l=s("46291"),a=s("67860"),o=s("11678"),c=s("45960");let d={id:"code-blocks",description:"Handling code blocks in Docusaurus Markdown",slug:"/markdown-features/code-blocks"},h="Code blocks",u={},g=[{value:"Code title",id:"code-title",level:2},{value:"Syntax highlighting",id:"syntax-highlighting",level:2},{value:"Theming",id:"theming",level:3},{value:"Supported Languages",id:"supported-languages",level:3},{value:"Line highlighting",id:"line-highlighting",level:2},{value:"Highlighting with comments",id:"highlighting-with-comments",level:3},{value:"Highlighting with metadata string",id:"highlighting-with-metadata-string",level:3},{value:"Custom magic comments",id:"custom-magic-comments",level:3},{value:"Line numbering",id:"line-numbering",level:2},{value:"Interactive code editor",id:"interactive-code-editor",level:2},{value:"Imports",id:"imports",level:3},{value:"Imperative Rendering (noInline)",id:"imperative-rendering-noinline",level:3},{value:"Using JSX markup in code blocks",id:"using-jsx-markup",level:2},{value:"Multi-language support code blocks",id:"multi-language-support-code-blocks",level:2},{value:"Docusaurus npm2yarn remark plugin",id:"npm2yarn-remark-plugin",level:3},{value:"Configuration",id:"npm2yarn-remark-plugin-configuration",level:4},{value:"Usage in JSX",id:"usage-in-jsx",level:2}];function m(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"code-blocks",children:"Code blocks"})}),"\n","\n",(0,r.jsx)(n.p,{children:"Code blocks within documentation are super-powered \uD83D\uDCAA."}),"\n",(0,r.jsx)(n.h2,{id:"code-title",children:"Code title"}),"\n",(0,r.jsxs)(n.p,{children:["You can add a title to the code block by adding a ",(0,r.jsx)(n.code,{children:"title"})," key after the language (leave a space between them)."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:'```jsx title="/src/components/HelloCodeTitle.js"\nfunction HelloCodeTitle(props) {\n return Hello, {props.name}
;\n}\n```\n'})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:'title="/src/components/HelloCodeTitle.js"',children:"function HelloCodeTitle(props) {\n return Hello, {props.name}
;\n}\n"})})}),"\n",(0,r.jsx)(n.h2,{id:"syntax-highlighting",children:"Syntax highlighting"}),"\n",(0,r.jsxs)(n.p,{children:["Code blocks are text blocks wrapped around by strings of 3 backticks. You may check out ",(0,r.jsx)(n.a,{href:"https://github.com/mdx-js/specification",children:"this reference"})," for the specifications of MDX."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```js\nconsole.log('Every repo must come with a mascot.');\n```\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Use the matching language meta string for your code block, and Docusaurus will pick up syntax highlighting automatically, powered by ",(0,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer",children:"Prism React Renderer"}),"."]}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"console.log('Every repo must come with a mascot.');\n"})})}),"\n",(0,r.jsx)(n.h3,{id:"theming",children:"Theming"}),"\n",(0,r.jsxs)(n.p,{children:["By default, the Prism ",(0,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer#theming",children:"syntax highlighting theme"})," we use is ",(0,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/prism-react-renderer/src/themes/palenight.ts",children:"Palenight"}),". You can change this to another theme by passing ",(0,r.jsx)(n.code,{children:"theme"})," field in ",(0,r.jsx)(n.code,{children:"prism"})," as ",(0,r.jsx)(n.code,{children:"themeConfig"})," in your docusaurus.config.js."]}),"\n",(0,r.jsxs)(n.p,{children:["For example, if you prefer to use the ",(0,r.jsx)(n.code,{children:"dracula"})," highlighting theme:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"import {themes as prismThemes} from 'prism-react-renderer';\n\nexport default {\n themeConfig: {\n prism: {\n // highlight-next-line\n theme: prismThemes.dracula,\n },\n },\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Because a Prism theme is just a JS object, you can also write your own theme if you are not satisfied with the default. Docusaurus enhances the ",(0,r.jsx)(n.code,{children:"github"})," and ",(0,r.jsx)(n.code,{children:"vsDark"})," themes to provide richer highlight, and you can check our implementations for the ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismLight.ts",children:"light"})," and ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismDark.ts",children:"dark"})," code block themes."]}),"\n",(0,r.jsx)(n.h3,{id:"supported-languages",children:"Supported Languages"}),"\n",(0,r.jsxs)(n.p,{children:["By default, Docusaurus comes with a subset of ",(0,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts#L9-L23",children:"commonly used languages"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"warning",children:(0,r.jsx)(n.p,{children:"Some popular languages like Java, C#, or PHP are not enabled by default."})}),"\n",(0,r.jsxs)(n.p,{children:["To add syntax highlighting for any of the other ",(0,r.jsx)(n.a,{href:"https://prismjs.com/#supported-languages",children:"Prism-supported languages"}),", define it in an array of additional languages."]}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["Each additional language has to be a valid Prism component name. For example, Prism would map the ",(0,r.jsx)(n.em,{children:"language"})," ",(0,r.jsx)(n.code,{children:"cs"})," to ",(0,r.jsx)(n.code,{children:"csharp"}),", but only ",(0,r.jsx)(n.code,{children:"prism-csharp.js"})," exists as a ",(0,r.jsx)(n.em,{children:"component"}),", so you need to use ",(0,r.jsx)(n.code,{children:"additionalLanguages: ['csharp']"}),". You can look into ",(0,r.jsx)(n.code,{children:"node_modules/prismjs/components"})," to find all components (languages) available."]})}),"\n",(0,r.jsx)(n.p,{children:"For example, if you want to add highlighting for the PowerShell language:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n themeConfig: {\n prism: {\n // highlight-next-line\n additionalLanguages: ['powershell'],\n },\n // ...\n },\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["After adding ",(0,r.jsx)(n.code,{children:"additionalLanguages"}),", restart Docusaurus."]}),"\n",(0,r.jsxs)(n.p,{children:["If you want to add highlighting for languages not yet supported by Prism, you can swizzle ",(0,r.jsx)(n.code,{children:"prism-include-languages"}),":"]}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-classic prism-include-languages\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-classic prism-include-languages\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-classic prism-include-languages\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["It will produce ",(0,r.jsx)(n.code,{children:"prism-include-languages.js"})," in your ",(0,r.jsx)(n.code,{children:"src/theme"})," folder. You can add highlighting support for custom languages by editing ",(0,r.jsx)(n.code,{children:"prism-include-languages.js"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:'title="src/theme/prism-include-languages.js"',children:"const prismIncludeLanguages = (Prism) => {\n // ...\n\n additionalLanguages.forEach((lang) => {\n require(`prismjs/components/prism-${lang}`);\n });\n\n // highlight-next-line\n require('/path/to/your/prism-language-definition');\n\n // ...\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["You can refer to ",(0,r.jsx)(n.a,{href:"https://github.com/PrismJS/prism/tree/master/components",children:"Prism's official language definitions"})," when you are writing your own language definitions."]}),"\n",(0,r.jsxs)(n.p,{children:["When adding a custom language definition, you do not need to add the language to the ",(0,r.jsx)(n.code,{children:"additionalLanguages"})," config array, since Docusaurus only looks up the ",(0,r.jsx)(n.code,{children:"additionalLanguages"})," strings in languages that Prism provides. Adding the language import in ",(0,r.jsx)(n.code,{children:"prism-include-languages.js"})," is sufficient."]}),"\n",(0,r.jsx)(n.h2,{id:"line-highlighting",children:"Line highlighting"}),"\n",(0,r.jsx)(n.h3,{id:"highlighting-with-comments",children:"Highlighting with comments"}),"\n",(0,r.jsxs)(n.p,{children:["You can use comments with ",(0,r.jsx)(n.code,{children:"highlight-next-line"}),", ",(0,r.jsx)(n.code,{children:"highlight-start"}),", and ",(0,r.jsx)(n.code,{children:"highlight-end"})," to select which lines are highlighted."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```js\nfunction HighlightSomeText(highlight) {\n if (highlight) {\n // highlight-next-line\n return 'This text is highlighted!';\n }\n\n return 'Nothing highlighted';\n}\n\nfunction HighlightMoreText(highlight) {\n // highlight-start\n if (highlight) {\n return 'This range is highlighted!';\n }\n // highlight-end\n\n return 'Nothing highlighted';\n}\n```\n"})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"function HighlightSomeText(highlight) {\n if (highlight) {\n // highlight-next-line\n return 'This text is highlighted!';\n }\n\n return 'Nothing highlighted';\n}\n\nfunction HighlightMoreText(highlight) {\n // highlight-start\n if (highlight) {\n return 'This range is highlighted!';\n }\n // highlight-end\n\n return 'Nothing highlighted';\n}\n"})})}),"\n",(0,r.jsx)(n.p,{children:"Supported commenting syntax:"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Style"}),(0,r.jsx)(n.th,{children:"Syntax"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"C-style"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"/* ... */"})," and ",(0,r.jsx)(n.code,{children:"// ..."})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"JSX-style"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"{/* ... */}"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Bash-style"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"# ..."})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"HTML-style"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"\x3c!-- ... --\x3e"})})]})]})]}),"\n",(0,r.jsxs)(n.p,{children:["We will do our best to infer which set of comment styles to use based on the language, and default to allowing ",(0,r.jsx)(n.em,{children:"all"})," comment styles. If there's a comment style that is not currently supported, we are open to adding them! Pull requests welcome. Note that different comment styles have no semantic difference, only their content does."]}),"\n",(0,r.jsxs)(n.p,{children:["You can set your own background color for highlighted code line in your ",(0,r.jsx)(n.code,{children:"src/css/custom.css"})," which will better fit to your selected syntax highlighting theme. The color given below works for the default highlighting theme (Palenight), so if you are using another theme, you will have to tweak the color accordingly."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",metastring:'title="/src/css/custom.css"',children:":root {\n --docusaurus-highlighted-code-line-bg: rgb(72, 77, 91);\n}\n\n/* If you have a different syntax highlighting theme for dark mode. */\n[data-theme='dark'] {\n /* Color which works with dark mode syntax highlighting theme */\n --docusaurus-highlighted-code-line-bg: rgb(100, 100, 100);\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["If you also need to style the highlighted code line in some other way, you can target on ",(0,r.jsx)(n.code,{children:"theme-code-block-highlighted-line"})," CSS class."]}),"\n",(0,r.jsx)(n.h3,{id:"highlighting-with-metadata-string",children:"Highlighting with metadata string"}),"\n",(0,r.jsxs)(n.p,{children:["You can also specify highlighted line ranges within the language meta string (leave a space after the language). To highlight multiple lines, separate the line numbers by commas or use the range syntax to select a chunk of lines. This feature uses the ",(0,r.jsx)(n.code,{children:"parse-number-range"})," library and you can find ",(0,r.jsx)(n.a,{href:"https://www.npmjs.com/package/parse-numeric-range",children:"more syntax"})," on their project details."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```jsx {1,4-6,11}\nimport React from 'react';\n\nfunction MyComponent(props) {\n if (props.isBar) {\n return Bar
;\n }\n\n return Foo
;\n}\n\nexport default MyComponent;\n```\n"})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:"{1,4-6,11}",children:"import React from 'react';\n\nfunction MyComponent(props) {\n if (props.isBar) {\n return Bar
;\n }\n\n return Foo
;\n}\n\nexport default MyComponent;\n"})})}),"\n",(0,r.jsxs)(n.admonition,{title:"prefer comments",type:"tip",children:[(0,r.jsx)(n.p,{children:"Prefer highlighting with comments where you can. By inlining highlight in the code, you don't have to manually count the lines if your code block becomes long. If you add/remove lines, you also don't have to offset your line ranges."}),(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-diff",children:"- ```jsx {3}\n+ ```jsx {4}\n function HighlightSomeText(highlight) {\n if (highlight) {\n+ console.log('Highlighted text found');\n return 'This text is highlighted!';\n }\n\n return 'Nothing highlighted';\n }\n ```\n"})}),(0,r.jsx)(n.p,{children:"Below, we will introduce how the magic comment system can be extended to define custom directives and their functionalities. The magic comments would only be parsed if a highlight metastring is not present."})]}),"\n",(0,r.jsx)(n.h3,{id:"custom-magic-comments",children:"Custom magic comments"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"// highlight-next-line"})," and ",(0,r.jsx)(n.code,{children:"// highlight-start"}),' etc. are called "magic comments", because they will be parsed and removed, and their purposes are to add metadata to the next line, or the section that the pair of start- and end-comments enclose.']}),"\n",(0,r.jsxs)(n.p,{children:["You can declare custom magic comments through theme config. For example, you can register another magic comment that adds a ",(0,r.jsx)(n.code,{children:"code-block-error-line"})," class name:"]}),"\n",(0,r.jsxs)(l.Z,{children:[(0,r.jsx)(a.Z,{value:"docusaurus.config.js",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"export default {\n themeConfig: {\n prism: {\n magicComments: [\n // Remember to extend the default highlight class name as well!\n {\n className: 'theme-code-block-highlighted-line',\n line: 'highlight-next-line',\n block: {start: 'highlight-start', end: 'highlight-end'},\n },\n // highlight-start\n {\n className: 'code-block-error-line',\n line: 'This will error',\n },\n // highlight-end\n ],\n },\n },\n};\n"})})}),(0,r.jsx)(a.Z,{value:"src/css/custom.css",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:".code-block-error-line {\n background-color: #ff000020;\n display: block;\n margin: 0 calc(-1 * var(--ifm-pre-padding));\n padding: 0 var(--ifm-pre-padding);\n border-left: 3px solid #ff000080;\n}\n"})})}),(0,r.jsx)(a.Z,{value:"myDoc.md",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"In JavaScript, trying to access properties on `null` will error.\n\n```js\nconst name = null;\n// This will error\nconsole.log(name.toUpperCase());\n// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')\n```\n"})})})]}),"\n",(0,r.jsxs)(o.Z,{children:[(0,r.jsxs)(n.p,{children:["In JavaScript, trying to access properties on ",(0,r.jsx)(n.code,{children:"null"})," will error."]}),(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"const name = null;\n// This will error\nconsole.log(name.toUpperCase());\n// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')\n"})})]}),"\n",(0,r.jsxs)(n.p,{children:["If you use number ranges in metastring (the ",(0,r.jsx)(n.code,{children:"{1,3-4}"})," syntax), Docusaurus will apply the ",(0,r.jsxs)(n.strong,{children:["first ",(0,r.jsx)(n.code,{children:"magicComments"})," entry"]}),"'s class name. This, by default, is ",(0,r.jsx)(n.code,{children:"theme-code-block-highlighted-line"}),", but if you change the ",(0,r.jsx)(n.code,{children:"magicComments"})," config and use a different entry as the first one, the meaning of the metastring range will change as well."]}),"\n",(0,r.jsxs)(n.p,{children:["You can disable the default line highlighting comments with ",(0,r.jsx)(n.code,{children:"magicComments: []"}),". If there's no magic comment config, but Docusaurus encounters a code block containing a metastring range, it will error because there will be no class name to apply\u2014the highlighting class name, after all, is just a magic comment entry."]}),"\n",(0,r.jsxs)(n.p,{children:["Every magic comment entry will contain three keys: ",(0,r.jsx)(n.code,{children:"className"})," (required), ",(0,r.jsx)(n.code,{children:"line"}),", which applies to the directly next line, or ",(0,r.jsx)(n.code,{children:"block"})," (containing ",(0,r.jsx)(n.code,{children:"start"})," and ",(0,r.jsx)(n.code,{children:"end"}),"), which applies to the entire block enclosed by the two comments."]}),"\n",(0,r.jsxs)(n.p,{children:["Using CSS to target the class can already do a lot, but you can unlock the full potential of this feature through ",(0,r.jsx)(n.a,{href:"/docs/swizzling",children:"swizzling"}),"."]}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-classic CodeBlock/Line\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"Line"})," component will receive the list of class names, based on which you can conditionally render different markup."]}),"\n",(0,r.jsx)(n.h2,{id:"line-numbering",children:"Line numbering"}),"\n",(0,r.jsxs)(n.p,{children:["You can enable line numbering for your code block by using ",(0,r.jsx)(n.code,{children:"showLineNumbers"})," key within the language meta string (don't forget to add space directly before the key)."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```jsx {1,4-6,11} showLineNumbers\nimport React from 'react';\n\nfunction MyComponent(props) {\n if (props.isBar) {\n return Bar
;\n }\n\n return Foo
;\n}\n\nexport default MyComponent;\n```\n"})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:"{1,4-6,11} showLineNumbers",children:"import React from 'react';\n\nfunction MyComponent(props) {\n if (props.isBar) {\n return Bar
;\n }\n\n return Foo
;\n}\n\nexport default MyComponent;\n"})})}),"\n",(0,r.jsx)(n.h2,{id:"interactive-code-editor",children:"Interactive code editor"}),"\n",(0,r.jsxs)(n.p,{children:["(Powered by ",(0,r.jsx)(n.a,{href:"https://github.com/FormidableLabs/react-live",children:"React Live"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["You can create an interactive coding editor with the ",(0,r.jsx)(n.code,{children:"@docusaurus/theme-live-codeblock"})," plugin. First, add the plugin to your package."]}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install --save @docusaurus/theme-live-codeblock\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/theme-live-codeblock\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/theme-live-codeblock\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["You will also need to add the plugin to your ",(0,r.jsx)(n.code,{children:"docusaurus.config.js"}),"."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"{3}",children:"export default {\n // ...\n themes: ['@docusaurus/theme-live-codeblock'],\n // ...\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To use the plugin, create a code block with ",(0,r.jsx)(n.code,{children:"live"})," attached to the language meta string."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```jsx live\nfunction Clock(props) {\n const [date, setDate] = useState(new Date());\n useEffect(() => {\n const timerID = setInterval(() => tick(), 1000);\n\n return function cleanup() {\n clearInterval(timerID);\n };\n });\n\n function tick() {\n setDate(new Date());\n }\n\n return (\n \n
It is {date.toLocaleTimeString()}.
\n \n );\n}\n```\n"})}),"\n",(0,r.jsx)(n.p,{children:"The code block will be rendered as an interactive editor. Changes to the code will reflect on the result panel live."}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:"live",live:!0,children:"function Clock(props) {\n const [date, setDate] = useState(new Date());\n useEffect(() => {\n const timerID = setInterval(() => tick(), 1000);\n\n return function cleanup() {\n clearInterval(timerID);\n };\n });\n\n function tick() {\n setDate(new Date());\n }\n\n return (\n \n
It is {date.toLocaleTimeString()}.
\n \n );\n}\n"})})}),"\n",(0,r.jsx)(n.h3,{id:"imports",children:"Imports"}),"\n",(0,r.jsx)(n.admonition,{title:"react-live and imports",type:"warning",children:(0,r.jsx)(n.p,{children:"It is not possible to import components directly from the react-live code editor, you have to define available imports upfront."})}),"\n",(0,r.jsx)(n.p,{children:"By default, all React imports are available. If you need more imports available, swizzle the react-live scope:"}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope -- --eject\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn swizzle @docusaurus/theme-live-codeblock ReactLiveScope --eject\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope --eject\n"})})})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:'title="src/theme/ReactLiveScope/index.js"',children:"import React from 'react';\n\n// highlight-start\nconst ButtonExample = (props) => (\n \n);\n// highlight-end\n\n// Add react-live imports you need here\nconst ReactLiveScope = {\n React,\n ...React,\n // highlight-next-line\n ButtonExample,\n};\n\nexport default ReactLiveScope;\n"})}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"ButtonExample"})," component is now available to use:"]}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:"live",live:!0,children:"function MyPlayground(props) {\n return (\n \n alert('hey!')}>Click me\n
\n );\n}\n"})})}),"\n",(0,r.jsx)(n.h3,{id:"imperative-rendering-noinline",children:"Imperative Rendering (noInline)"}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"noInline"})," option should be used to avoid errors when your code spans multiple components or variables."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```jsx live noInline\nconst project = 'Docusaurus';\n\nconst Greeting = () => Hello {project}!
;\n\nrender();\n```\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Unlike an ordinary interactive code block, when using ",(0,r.jsx)(n.code,{children:"noInline"})," React Live won't wrap your code in an inline function to render it."]}),"\n",(0,r.jsxs)(n.p,{children:["You will need to explicitly call ",(0,r.jsx)(n.code,{children:"render()"})," at the end of your code to display the output."]}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:"live noInline",live:!0,children:'const project = "Docusaurus";\n\nconst Greeting = () => (\n Hello {project}!
\n);\n\nrender(\n \n);\n'})})}),"\n",(0,r.jsx)(n.h2,{id:"using-jsx-markup",children:"Using JSX markup in code blocks"}),"\n",(0,r.jsx)(n.p,{children:"Code block in Markdown always preserves its content as plain text, meaning you can't do something like:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'type EditUrlFunction = (params: {\n // This doesn\'t turn into a link (for good reason!)\n version: Version;\n versionDocsDirPath: string;\n docPath: string;\n permalink: string;\n locale: string;\n}) => string | undefined;\n'})}),"\n",(0,r.jsxs)(n.p,{children:["If you want to embed HTML markup such as anchor links or bold type, you can use the ",(0,r.jsx)(n.code,{children:""})," tag, ",(0,r.jsx)(n.code,{children:""})," tag, or ",(0,r.jsx)(n.code,{children:""})," component."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"\n Input: 1 2 3 4{'\\n'}\n Output: \"366300745\"{'\\n'}\n\n"})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)("pre",{children:[(0,r.jsx)("b",{children:"Input: "}),"1 2 3 4\n",(0,r.jsx)("b",{children:"Output: "}),'"366300745"\n']})}),"\n",(0,r.jsx)(n.admonition,{title:"MDX is whitespace insensitive",type:"warning",children:(0,r.jsxs)(n.p,{children:["MDX is in line with JSX behavior: line break characters, even when inside ",(0,r.jsx)(n.code,{children:""}),", are turned into spaces. You have to explicitly write the new line character for it to be printed out."]})}),"\n",(0,r.jsx)(n.admonition,{type:"warning",children:(0,r.jsx)(n.p,{children:"Syntax highlighting only works on plain strings. Docusaurus will not attempt to parse code block content containing JSX children."})}),"\n",(0,r.jsx)(n.h2,{id:"multi-language-support-code-blocks",children:"Multi-language support code blocks"}),"\n",(0,r.jsx)(n.p,{children:"With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switch between them using a tabs component."}),"\n",(0,r.jsxs)(n.p,{children:["Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a general-purpose ",(0,r.jsx)(n.a,{href:"/docs/markdown-features/tabs",children:(0,r.jsx)(n.code,{children:""})})," component in the classic theme so that you can use it for other non-code scenarios as well."]}),"\n",(0,r.jsxs)(n.p,{children:["The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block are ",(0,r.jsx)(n.strong,{children:"intentional"}),". This is a ",(0,r.jsx)(n.a,{href:"/docs/markdown-features/react#markdown-and-jsx-interoperability",children:"current limitation of MDX"}),": you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:'import Tabs from \'@theme/Tabs\';\nimport TabItem from \'@theme/TabItem\';\n\n\n\n\n```js\nfunction helloWorld() {\n console.log(\'Hello, world!\');\n}\n```\n\n\n\n\n```py\ndef hello_world():\n print("Hello, world!")\n```\n\n\n\n\n```java\nclass HelloWorld {\n public static void main(String args[]) {\n System.out.println("Hello, World");\n }\n}\n```\n\n\n\n'})}),"\n",(0,r.jsx)(n.p,{children:"And you will get the following:"}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsxs)(l.Z,{children:[(0,r.jsx)(a.Z,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"function helloWorld() {\n console.log('Hello, world!');\n}\n"})})}),(0,r.jsx)(a.Z,{value:"py",label:"Python",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-py",children:'def hello_world():\n print("Hello, world!")\n'})})}),(0,r.jsx)(a.Z,{value:"java",label:"Java",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-java",children:'class HelloWorld {\n public static void main(String args[]) {\n System.out.println("Hello, World");\n }\n}\n'})})})]})}),"\n",(0,r.jsxs)(n.p,{children:["If you have multiple of these multi-language code tabs, and you want to sync the selection across the tab instances, refer to the ",(0,r.jsx)(n.a,{href:"/docs/markdown-features/tabs#syncing-tab-choices",children:"Syncing tab choices section"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"npm2yarn-remark-plugin",children:"Docusaurus npm2yarn remark plugin"}),"\n",(0,r.jsx)(n.p,{children:"Displaying CLI commands in both npm and Yarn is a very common need, for example:"}),"\n",(0,r.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(a.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/remark-plugin-npm2yarn\n"})})}),(0,r.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/remark-plugin-npm2yarn\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Docusaurus provides such a utility out of the box, freeing you from using the ",(0,r.jsx)(n.code,{children:"Tabs"})," component every time. To enable this feature, first install the ",(0,r.jsx)(n.code,{children:"@docusaurus/remark-plugin-npm2yarn"})," package as above, and then in ",(0,r.jsx)(n.code,{children:"docusaurus.config.js"}),", for the plugins where you need this feature (doc, blog, pages, etc.), register it in the ",(0,r.jsx)(n.code,{children:"remarkPlugins"})," option. (See ",(0,r.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-content-docs#ex-config",children:"Docs configuration"})," for more details on configuration format)"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n // ...\n presets: [\n [\n '@docusaurus/preset-classic',\n {\n docs: {\n // highlight-start\n remarkPlugins: [\n [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],\n ],\n // highlight-end\n },\n pages: {\n // highlight-next-line\n remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],\n },\n blog: {\n // highlight-start\n remarkPlugins: [\n [\n require('@docusaurus/remark-plugin-npm2yarn'),\n {converters: ['pnpm']},\n ],\n ],\n // highlight-end\n // ...\n },\n },\n ],\n ],\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["And then use it by adding the ",(0,r.jsx)(n.code,{children:"npm2yarn"})," key to the code block:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"```bash npm2yarn\nnpm install @docusaurus/remark-plugin-npm2yarn\n```\n"})}),"\n",(0,r.jsx)(n.h4,{id:"npm2yarn-remark-plugin-configuration",children:"Configuration"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Option"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Default"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"sync"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})}),(0,r.jsx)(n.td,{children:"Whether to sync the selected converter across all code blocks."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"converters"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"array"})}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"'yarn'"}),", ",(0,r.jsx)(n.code,{children:"'pnpm'"})]}),(0,r.jsx)(n.td,{children:"The list of converters to use. The order of the converters is important, as the first converter will be used as the default choice."})]})]})]}),"\n",(0,r.jsx)(n.h2,{id:"usage-in-jsx",children:"Usage in JSX"}),"\n",(0,r.jsxs)(n.p,{children:["Outside of Markdown, you can use the ",(0,r.jsx)(n.code,{children:"@theme/CodeBlock"})," component to get the same output."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:'import CodeBlock from \'@theme/CodeBlock\';\n\nexport default function MyReactPage() {\n return (\n \n {/* highlight-start */}\n \n {`function HelloCodeTitle(props) {\n return Hello, {props.name}
;\n}`}\n \n {/* highlight-end */}\n
\n );\n}\n'})}),"\n",(0,r.jsx)(o.Z,{children:(0,r.jsx)(c.Z,{language:"jsx",title:"/src/components/HelloCodeTitle.js",showLineNumbers:!0,children:`function HelloCodeTitle(props) {
return Hello, {props.name}
;
}`})}),"\n",(0,r.jsxs)(n.p,{children:["The props accepted are ",(0,r.jsx)(n.code,{children:"language"}),", ",(0,r.jsx)(n.code,{children:"title"})," and ",(0,r.jsx)(n.code,{children:"showLineNumbers"}),", in the same way as you write Markdown code blocks."]}),"\n",(0,r.jsxs)(n.p,{children:["Although discouraged, you can also pass in a ",(0,r.jsx)(n.code,{children:"metastring"})," prop like ",(0,r.jsx)(n.code,{children:"metastring='{1-2} title=\"/src/components/HelloCodeTitle.js\" showLineNumbers'"}),", which is how Markdown code blocks are handled under the hood. However, we recommend you ",(0,r.jsx)(n.a,{href:"#highlighting-with-comments",children:"use comments for highlighting lines"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["As ",(0,r.jsx)(n.a,{href:"#using-jsx-markup",children:"previously stated"}),", syntax highlighting is only applied when the children is a simple string."]})]})}function p(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},67860:function(e,n,s){s.d(n,{Z:()=>l});var t=s("85893");s("67294");var r=s("90496");let i="tabItem_pnkT";function l(e){let{children:n,hidden:s,className:l}=e;return(0,t.jsx)("div",{role:"tabpanel",className:(0,r.Z)(i,l),hidden:s,children:n})}},46291:function(e,n,s){s.d(n,{Z:()=>y});var t=s("85893"),r=s("67294"),i=s("90496"),l=s("12451"),a=s("3620"),o=s("89637"),c=s("74417"),d=s("46918"),h=s("58247");function u(e){return r.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||r.isValidElement(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)})?.filter(Boolean)??[]}function g(e){let{value:n,tabValues:s}=e;return s.some(e=>e.value===n)}var m=s("8903");let p="tabList_Qoir",x="tabItem_AQgk";function j(e){let{className:n,block:s,selectedValue:r,selectValue:a,tabValues:o}=e,c=[],{blockElementScrollPositionUntilNextRender:d}=(0,l.o5)(),h=e=>{let n=e.currentTarget,s=o[c.indexOf(n)].value;s!==r&&(d(n),a(s))},u=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let s=c.indexOf(e.currentTarget)+1;n=c[s]??c[0];break}case"ArrowLeft":{let s=c.indexOf(e.currentTarget)-1;n=c[s]??c[c.length-1]}}n?.focus()};return(0,t.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,t.jsx)("li",{role:"tab",tabIndex:r===n?0:-1,"aria-selected":r===n,ref:e=>{c.push(e)},onKeyDown:u,onClick:h,...l,className:(0,i.Z)("tabs__item",x,l?.className,{"tabs__item--active":r===n}),children:s??n},n)})})}function f(e){let{lazy:n,children:s,selectedValue:l}=e,a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){let e=a.find(e=>e.props.value===l);return e?(0,r.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,t.jsx)("div",{className:"margin-top--md",children:a.map((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==l}))})}function b(e){let n=function(e){let{defaultValue:n,queryString:s=!1,groupId:t}=e,i=function(e){let{values:n,children:s}=e;return(0,r.useMemo)(()=>{let e=n??u(s).map(e=>{let{props:{value:n,label:s,attributes:t,default:r}}=e;return{value:n,label:s,attributes:t,default:r}});return!function(e){let n=(0,d.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 . Every value needs to be unique.`)}(e),e},[n,s])}(e),[l,m]=(0,r.useState)(()=>(function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:s}))throw Error(`Docusaurus error: The 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 t=s.find(e=>e.default)??s[0];if(!t)throw Error("Unexpected error: 0 tabValues");return t.value})({defaultValue:n,tabValues:i})),[p,x]=function(e){let{queryString:n=!1,groupId:s}=e,t=(0,a.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 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}),l=(0,c._X)(i);return[l,(0,r.useCallback)(e=>{if(!i)return;let n=new URLSearchParams(t.location.search);n.set(i,e),t.replace({...t.location,search:n.toString()})},[i,t])]}({queryString:s,groupId:t}),[j,f]=function(e){var n;let{groupId:s}=e;let t=(n=s)?`docusaurus.tab.${n}`:null,[i,l]=(0,h.Nk)(t);return[i,(0,r.useCallback)(e=>{if(!!t)l.set(e)},[t,l])]}({groupId:t}),b=(()=>{let e=p??j;return g({value:e,tabValues:i})?e:null})();return(0,o.Z)(()=>{b&&m(b)},[b]),{selectedValue:l,selectValue:(0,r.useCallback)(e=>{if(!g({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);m(e),x(e),f(e)},[x,f,i]),tabValues:i}}(e);return(0,t.jsxs)("div",{className:(0,i.Z)("tabs-container",p),children:[(0,t.jsx)(j,{...n,...e}),(0,t.jsx)(f,{...n,...e})]})}function y(e){let n=(0,m.Z)();return(0,t.jsx)(b,{...e,children:u(e.children)},String(n))}},82234:function(e,n,s){s.d(n,{Z:function(){return i}});var t=s(85893);s(67294);var r=s(8903);function i(e){let{children:n,fallback:s}=e;return(0,r.Z)()?(0,t.jsx)(t.Fragment,{children:n?.()}):s??null}},11678:function(e,n,s){s.d(n,{Z:()=>g});var t=s("85893");s("67294");var r=s("90496");let i="browserWindow_my1Q",l="browserWindowHeader_jXSR",a="buttons_uHc7",o="browserWindowAddressBar_Pd8y",c="dot_giz1",d="browserWindowMenuIcon_Vhuh",h="bar_rrRL",u="browserWindowBody_Idgs";function g(e){let{children:n,minHeight:s,url:g="http://localhost:3000",style:m,bodyStyle:p}=e;return(0,t.jsxs)("div",{className:i,style:{...m,minHeight:s},children:[(0,t.jsxs)("div",{className:l,children:[(0,t.jsxs)("div",{className:a,children:[(0,t.jsx)("span",{className:c,style:{background:"#f25f58"}}),(0,t.jsx)("span",{className:c,style:{background:"#fbbe3c"}}),(0,t.jsx)("span",{className:c,style:{background:"#58cb42"}})]}),(0,t.jsx)("div",{className:(0,r.Z)(o,"text--truncate"),children:g}),(0,t.jsx)("div",{className:d,children:(0,t.jsxs)("div",{children:[(0,t.jsx)("span",{className:h}),(0,t.jsx)("span",{className:h}),(0,t.jsx)("span",{className:h})]})})]}),(0,t.jsx)("div",{className:u,style:p,children:n})]})}},45960:function(e,n,s){s.d(n,{Z:()=>el});var t,r={};s.r(r),s.d(r,{ButtonExample:()=>S});var i=s("85893"),l=s("67294"),a=s("90496"),o=s("8903"),c=s("10075"),d=s("80661"),h=s("30056"),u=s("82234"),g=s("22687"),m=s("31058"),p=s("70341");function x(){let{prism:e}=(0,p.L)(),{colorMode:n}=(0,m.I)(),s=e.theme,t=e.darkTheme||s;return"dark"===n?t:s}var j=s("18605");let f="playgroundContainer_6Ior",b="playgroundHeader_Tvsk",y="playgroundEditor_TySg",v="playgroundPreview_mApW";function k(e){let{children:n}=e;return(0,i.jsx)("div",{className:(0,a.Z)(b),children:n})}function w(){return(0,i.jsx)("div",{children:"Loading..."})}function N(){return(0,i.jsx)(u.Z,{fallback:(0,i.jsx)(w,{}),children:()=>(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(j.Z,{fallback:e=>(0,i.jsx)(g.Ac,{...e}),children:(0,i.jsx)(c.i5,{})}),(0,i.jsx)(c.IF,{})]})})}function C(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(k,{children:(0,i.jsx)(d.Z,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,i.jsx)("div",{className:v,children:(0,i.jsx)(N,{})})]})}function T(){let e=(0,o.Z)();return(0,i.jsx)(c.uz,{className:y},String(e))}function B(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(k,{children:(0,i.jsx)(d.Z,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,i.jsx)(T,{})]})}let I=e=>`${e};`;function L(e){let{children:n,transformCode:s,...t}=e,{siteConfig:{themeConfig:r}}=(0,h.Z)(),{liveCodeBlock:{playgroundPosition:l}}=r,a=x(),o=t.metastring?.includes("noInline")??!1;return(0,i.jsx)("div",{className:f,children:(0,i.jsx)(c.nu,{code:n?.replace(/\n$/,""),noInline:o,transformCode:s??I,theme:a,...t,children:"top"===l?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(C,{}),(0,i.jsx)(B,{})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(B,{}),(0,i.jsx)(C,{})]})})})}function S(e){return(0,i.jsx)("button",{type:"button",...e,style:{backgroundColor:"white",color:"black",border:"solid red",borderRadius:20,padding:10,cursor:"pointer",...e.style}})}let Z={React:l,...l,...r};var E=s("2235"),D=s("6324"),H=s.n(D);let M=/title=(?["'])(?.*?)\1/,_=/\{(?<range>[\d,-]+)\}/,P={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},R={...P,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:""}},z=Object.keys(P);function A(e,n){let s=e.map(e=>{let{start:s,end:t}=R[e];return`(?:${s}\\s*(${n.flatMap(e=>[e.line,e.block?.start,e.block?.end].filter(Boolean)).join("|")})\\s*${t})`}).join("|");return RegExp(`^\\s*(?:${s})\\s*$`)}let W="codeBlockContainer_jDV4";function F(e){let{as:n,...s}=e,t=function(e){let n={color:"--prism-color",backgroundColor:"--prism-background-color"},s={};return Object.entries(e.plain).forEach(e=>{let[t,r]=e,i=n[t];i&&"string"==typeof r&&(s[i]=r)}),s}(x());return(0,i.jsx)(n,{...s,style:t,className:(0,a.Z)(s.className,W,E.k.common.codeBlock)})}let Y={codeBlockContent:"codeBlockContent_vx7S",codeBlockTitle:"codeBlockTitle_bdru",codeBlock:"codeBlock_Gebt",codeBlockStandalone:"codeBlockStandalone_i_cY",codeBlockLines:"codeBlockLines_FJaf",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_FU9Q",buttonGroup:"buttonGroup_cUGO"};function $(e){let{children:n,className:s}=e;return(0,i.jsx)(F,{as:"pre",tabIndex:0,className:(0,a.Z)(Y.codeBlockStandalone,"thin-scrollbar",s),children:(0,i.jsx)("code",{className:Y.codeBlockLines,children:n})})}var J=s("31008");let O={attributes:!0,characterData:!0,childList:!0,subtree:!0};var U=s("7316");let q={codeLine:"codeLine_qRmp",codeLineNumber:"codeLineNumber_dS_J",codeLineContent:"codeLineContent_XF5l"};function X(e){let{line:n,classNames:s,showLineNumbers:t,getLineProps:r,getTokenProps:l}=e;1===n.length&&"\n"===n[0].content&&(n[0].content="");let o=r({line:n,className:(0,a.Z)(s,t&&q.codeLine)}),c=n.map((e,n)=>(0,i.jsx)("span",{...l({token:e})},n));return(0,i.jsxs)("span",{...o,children:[t?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("span",{className:q.codeLineNumber}),(0,i.jsx)("span",{className:q.codeLineContent,children:c})]}):c,(0,i.jsx)("br",{})]})}var V=s("84171");function G(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.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"})})}function Q(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}let K={copyButtonCopied:"copyButtonCopied_OkN_",copyButtonIcons:"copyButtonIcons_OqsO",copyButtonIcon:"copyButtonIcon_PgCn",copyButtonSuccessIcon:"copyButtonSuccessIcon_bsQG"};function ee(e){let{code:n,className:s}=e,[t,r]=(0,l.useState)(!1),o=(0,l.useRef)(void 0),c=(0,l.useCallback)(()=>{(0,V.Z)(n),r(!0),o.current=window.setTimeout(()=>{r(!1)},1e3)},[n]);return(0,l.useEffect)(()=>()=>window.clearTimeout(o.current),[]),(0,i.jsx)("button",{type:"button","aria-label":t?(0,d.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,d.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,d.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,a.Z)("clean-btn",s,K.copyButton,t&&K.copyButtonCopied),onClick:c,children:(0,i.jsxs)("span",{className:K.copyButtonIcons,"aria-hidden":"true",children:[(0,i.jsx)(G,{className:K.copyButtonIcon}),(0,i.jsx)(Q,{className:K.copyButtonSuccessIcon})]})})}function en(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.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"})})}let es={wordWrapButtonIcon:"wordWrapButtonIcon_MQXS",wordWrapButtonEnabled:"wordWrapButtonEnabled_TBIH"};function et(e){let{className:n,onClick:s,isEnabled:t}=e,r=(0,d.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,i.jsx)("button",{type:"button",onClick:s,className:(0,a.Z)("clean-btn",n,t&&es.wordWrapButtonEnabled),"aria-label":r,title:r,children:(0,i.jsx)(en,{className:es.wordWrapButtonIcon,"aria-hidden":"true"})})}function er(e){var n,s,t;let{children:r,className:o="",metastring:c,title:d,showLineNumbers:h,language:u}=e,{prism:{defaultLanguage:g,magicComments:m}}=(0,p.L)();let j=(n=u??function(e){let n=e.split(" ").find(e=>e.startsWith("language-"));return n?.replace(/language-/,"")}(o)??g,n?.toLowerCase()),f=x(),b=function(){let[e,n]=(0,l.useState)(!1),[s,t]=(0,l.useState)(!1),r=(0,l.useRef)(null),i=(0,l.useCallback)(()=>{let s=r.current.querySelector("code");e?s.removeAttribute("style"):(s.style.whiteSpace="pre-wrap",s.style.overflowWrap="anywhere"),n(e=>!e)},[r,e]),a=(0,l.useCallback)(()=>{let{scrollWidth:e,clientWidth:n}=r.current;t(e>n||r.current.querySelector("code").hasAttribute("style"))},[r]);return!function(e,n){let[s,t]=(0,l.useState)(),r=(0,l.useCallback)(()=>{t(e.current?.closest("[role=tabpanel][hidden]"))},[e,t]);(0,l.useEffect)(()=>{r()},[r]),!function(e,n){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:O,t=(0,J.zX)(n),r=(0,J.Ql)(s);(0,l.useEffect)(()=>{let n=new MutationObserver(t);return e&&n.observe(e,r),()=>n.disconnect()},[e,t,r])}(s,e=>{e.forEach(e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(n(),r())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1})}(r,a),(0,l.useEffect)(()=>{a()},[e,a]),(0,l.useEffect)(()=>(window.addEventListener("resize",a,{passive:!0}),()=>{window.removeEventListener("resize",a)}),[a]),{codeBlockRef:r,isEnabled:e,isCodeScrollable:s,toggle:i}}();let y=(s=c,(s?.match(M)?.groups.title??"")||d),{lineClassNames:v,code:k}=function(e,n){let s=e.replace(/\n$/,""),{language:t,magicComments:r,metastring:i}=n;if(i&&_.test(i)){let e=i.match(_).groups.range;if(0===r.length)throw Error(`A highlight range has been given in code block's metastring (\`\`\` ${i}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);let n=r[0].className;return{lineClassNames:Object.fromEntries(H()(e).filter(e=>e>0).map(e=>[e-1,[n]])),code:s}}if(void 0===t)return{lineClassNames:{},code:s};let l=function(e,n){switch(e){case"js":case"javascript":case"ts":case"typescript":return A(["js","jsBlock"],n);case"jsx":case"tsx":return A(["js","jsBlock","jsx"],n);case"html":return A(["js","jsBlock","html"],n);case"python":case"py":case"bash":return A(["bash"],n);case"markdown":case"md":return A(["html","jsx","bash"],n);case"tex":case"latex":case"matlab":return A(["tex"],n);case"lua":case"haskell":return A(["lua"],n);case"sql":return A(["lua","jsBlock"],n);case"wasm":return A(["wasm"],n);case"vb":case"vba":case"visual-basic":return A(["vb","rem"],n);case"vbnet":return A(["vbnet","rem"],n);case"batch":return A(["rem"],n);case"basic":return A(["rem","f90"],n);case"fsharp":return A(["js","ml"],n);case"ocaml":case"sml":return A(["ml"],n);case"fortran":return A(["f90"],n);case"cobol":return A(["cobol"],n);default:return A(z,n)}}(t,r),a=s.split("\n"),o=Object.fromEntries(r.map(e=>[e.className,{start:0,range:""}])),c=Object.fromEntries(r.filter(e=>e.line).map(e=>{let{className:n,line:s}=e;return[s,n]})),d=Object.fromEntries(r.filter(e=>e.block).map(e=>{let{className:n,block:s}=e;return[s.start,n]})),h=Object.fromEntries(r.filter(e=>e.block).map(e=>{let{className:n,block:s}=e;return[s.end,n]}));for(let e=0;e<a.length;){let n=a[e].match(l);if(!n){e+=1;continue}let s=n.slice(1).find(e=>void 0!==e);c[s]?o[c[s]].range+=`${e},`:d[s]?o[d[s]].start=e:h[s]&&(o[h[s]].range+=`${o[h[s]].start}-${e-1},`),a.splice(e,1)}s=a.join("\n");let u={};return Object.entries(o).forEach(e=>{let[n,{range:s}]=e;H()(s).forEach(e=>{u[e]??=[],u[e].push(n)})}),{lineClassNames:u,code:s}}(r,{metastring:c,language:j,magicComments:m});let w=h??(t=c,!!t?.includes("showLineNumbers"));return(0,i.jsxs)(F,{as:"div",className:(0,a.Z)(o,j&&!o.includes(`language-${j}`)&&`language-${j}`),children:[y&&(0,i.jsx)("div",{className:Y.codeBlockTitle,children:y}),(0,i.jsxs)("div",{className:Y.codeBlockContent,children:[(0,i.jsx)(U.y$,{theme:f,code:k,language:j??"text",children:e=>{let{className:n,style:s,tokens:t,getLineProps:r,getTokenProps:l}=e;return(0,i.jsx)("pre",{tabIndex:0,ref:b.codeBlockRef,className:(0,a.Z)(n,Y.codeBlock,"thin-scrollbar"),style:s,children:(0,i.jsx)("code",{className:(0,a.Z)(Y.codeBlockLines,w&&Y.codeBlockLinesWithNumbering),children:t.map((e,n)=>(0,i.jsx)(X,{line:e,getLineProps:r,getTokenProps:l,classNames:v[n],showLineNumbers:w},n))})})}}),(0,i.jsxs)("div",{className:Y.buttonGroup,children:[(b.isEnabled||b.isCodeScrollable)&&(0,i.jsx)(et,{className:Y.codeButton,onClick:()=>b.toggle(),isEnabled:b.isEnabled}),(0,i.jsx)(ee,{className:Y.codeButton,code:k})]})]})]})}let ei=(t=function(e){var n;let{children:s,...t}=e,r=(0,o.Z)();let a=(n=s,l.Children.toArray(n).some(e=>(0,l.isValidElement)(e))?n:Array.isArray(n)?n.join(""):n),c="string"==typeof a?er:$;return(0,i.jsx)(c,{...t,children:a},String(r))},function(e){return e.live?(0,i.jsx)(L,{scope:Z,...e}):(0,i.jsx)(t,{...e})});function el(e){return(0,i.jsx)(ei,{...e})}}}]);