3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-24 12:07:58 +02:00
Code Issues Projects Releases Packages Wiki Activity
docusaurus/assets/js/64dfb3e9.077f547a.js
slorber a070dd9c97 deploy: 1c454a9430
2025-05-30 17:26:10 +00:00

1 line
No EOL
49 KiB
JavaScript
Raw Blame History

"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["59172"],{16688:function(e,n,t){t.d(n,{Z:()=>r});let r={copyButtonCopied:"copyButtonCopied_wDuR",copyButtonIcons:"copyButtonIcons_gMWc",copyButtonIcon:"copyButtonIcon_GXfb",copyButtonSuccessIcon:"copyButtonSuccessIcon_ktUX"}},61475:function(e,n,t){t.d(n,{Z:()=>r});let r={wordWrapButtonIcon:"wordWrapButtonIcon___5r",wordWrapButtonEnabled:"wordWrapButtonEnabled_nam_"}},62081:function(e,n,t){t.d(n,{Z:()=>r});let r={buttonGroup:"buttonGroup_KXnS"}},58683:function(e,n,t){t.d(n,{Z:()=>r});let r={codeBlockContainer:"codeBlockContainer_jDV4"}},18314:function(e,n,t){t.d(n,{Z:()=>r});let r={codeBlock:"codeBlock_Gebt",codeBlockStandalone:"codeBlockStandalone_i_cY",codeBlockLines:"codeBlockLines_FJaf",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_FU9Q"}},13112:function(e,n,t){t.d(n,{Z:()=>r});let r={codeBlockContent:"codeBlockContent_cKMj",codeBlockTitle:"codeBlockTitle_U6Q0",codeBlock:"codeBlock_QST6"}},61562:function(e,n,t){t.d(n,{Z:()=>r});let r={codeLine:"codeLine_qRmp",codeLineNumber:"codeLineNumber_dS_J",codeLineContent:"codeLineContent_XF5l"}},22438:function(e,n,t){t.d(n,{Z:()=>r});let r={tableOfContentsInline:"tableOfContentsInline_2sru"}},55701:function(e,n,t){t.d(n,{Z:()=>r});let r={tabItem:"tabItem_pnkT"}},93195:function(e,n,t){t.d(n,{Z:()=>r});let r={tabList:"tabList_Qoir",tabItem:"tabItem_AQgk"}},43335:function(e,n,t){t.d(n,{Z:()=>r});let r={playgroundContainer:"playgroundContainer_TDLX"}},7512:function(e,n,t){t.d(n,{Z:()=>r});let r={playgroundEditor:"playgroundEditor_uqZ4"}},926:function(e,n,t){t.d(n,{Z:()=>r});let r={playgroundHeader:"playgroundHeader_h_Hu"}},25562:function(e,n,t){t.d(n,{Z:()=>r});let r={playgroundPreview:"playgroundPreview_u2xE"}},67079:function(e,n,t){t.d(n,{Z:()=>r});let r={browserWindow:"browserWindow_my1Q",browserWindowHeader:"browserWindowHeader_jXSR",row:"row_KZDM",buttons:"buttons_uHc7",right:"right_oyze",browserWindowAddressBar:"browserWindowAddressBar_Pd8y",dot:"dot_giz1",browserWindowMenuIcon:"browserWindowMenuIcon_Vhuh",bar:"bar_rrRL",browserWindowBody:"browserWindowBody_Idgs"}},41918:function(e,n,t){t.d(n,{Z:()=>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"},52554:function(e,n,t){t.d(n,{ZP:()=>a,d$:()=>s});var r=t(85893),o=t(80980);let s=[];function i(e){let n={code:"code",p:"p",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("span",{children:["Hello ",e.name]}),"\n",(0,r.jsxs)(n.p,{children:["This is text some content from ",(0,r.jsx)(n.code,{children:"_markdown-partial-example.md"}),"."]})]})}function a(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}},24377:function(e,n,t){t.r(n),t.d(n,{Highlight:()=>f,assets:()=>p,contentTitle:()=>m,default:()=>j,frontMatter:()=>h,metadata:()=>r,toc:()=>x});var r=t(75079),o=t(85893),s=t(80980),i=t(44456),a=t(4575),l=t(54636),c=t(14547),d=t(41918),u=t(52554);t(42518);let h={id:"react",description:"Using the power of React in Docusaurus Markdown documents, thanks to MDX",slug:"/markdown-features/react"},m="MDX and React",p={},f=({children:e,color:n})=>(0,o.jsx)("span",{style:{backgroundColor:n,borderRadius:"2px",color:"#fff",padding:"0.2rem"},children:e}),x=[{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},...u.d$,{value:"Available exports",id:"available-exports",level:2}];function g(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.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)(i.Z,{minHeight:240,children:[(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(f,{color:"#25c2a0",children:"Docusaurus green"}),"\n"," ","and ",(0,o.jsx)(f,{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)(i.Z,{children:(0,o.jsxs)(n.p,{children:["I can conveniently use ",(0,o.jsx)(f,{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:"mdx.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)(a.Z,{groupId:"npm2yarn",children:[(0,o.jsx)(l.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)(l.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)(l.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"})})}),(0,o.jsx)(l.Z,{value:"bun",label:"Bun",children:(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"bun 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)(i.Z,{children:(0,o.jsx)(c.Z,{language:"jsx",children:d.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)(i.Z,{children:(0,o.jsx)(u.ZP,{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)(i.Z,{children:[(0,o.jsx)(n.p,{children:"The table of contents for this page, serialized:"}),(0,o.jsx)(c.Z,{className:"language-json",children:JSON.stringify(x,null,2)}),(0,o.jsx)(n.p,{children:"The front matter of this page:"}),(0,o.jsx)("ul",{children:Object.entries(h).map(([e,n])=>(0,o.jsxs)("li",{children:[(0,o.jsx)("b",{children:e}),": ",n]},e))}),(0,o.jsxs)("p",{children:["The title of this page is: ",(0,o.jsx)("b",{children:m})]})]})]})}function j(e={}){let{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(g,{...e})}):g(e)}},5343:function(e,n,t){t.d(n,{Z:()=>s});var r=t(85893);t(67294);var o=t(90496);function s(e){let{className:n,...t}=e;return(0,r.jsx)("button",{type:"button",...t,className:(0,o.Z)("clean-btn",n)})}},2556:function(e,n,t){t.d(n,{Z:()=>m});var r=t(85893),o=t(67294),s=t(90496),i=t(44771),a=t(77827),l=t(88568),c=t(5343),d=t(31660),u=t(87545),h=t(16688);function m(e){let{className:n}=e,{copyCode:t,isCopied:m}=function(){let{metadata:{code:e}}=(0,l.LS)(),[n,t]=(0,o.useState)(!1),r=(0,o.useRef)(void 0),s=(0,o.useCallback)(()=>{(0,i.Z)(e),t(!0),r.current=window.setTimeout(()=>{t(!1)},1e3)},[e]);return(0,o.useEffect)(()=>()=>window.clearTimeout(r.current),[]),{copyCode:s,isCopied:n}}();return(0,r.jsx)(c.Z,{"aria-label":m?(0,a.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,a.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,a.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,s.Z)(n,h.Z.copyButton,m&&h.Z.copyButtonCopied),onClick:t,children:(0,r.jsxs)("span",{className:h.Z.copyButtonIcons,"aria-hidden":"true",children:[(0,r.jsx)(d.Z,{className:h.Z.copyButtonIcon}),(0,r.jsx)(u.Z,{className:h.Z.copyButtonSuccessIcon})]})})}},93757:function(e,n,t){t.d(n,{Z:()=>d});var r=t(85893);t(67294);var o=t(90496),s=t(77827),i=t(88568),a=t(5343),l=t(67379),c=t(61475);function d(e){let{className:n}=e,{wordWrap:t}=(0,i.LS)();if(!(t.isEnabled||t.isCodeScrollable))return!1;let d=(0,s.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,r.jsx)(a.Z,{onClick:()=>t.toggle(),className:(0,o.Z)(n,t.isEnabled&&c.Z.wordWrapButtonEnabled),"aria-label":d,title:d,children:(0,r.jsx)(l.Z,{className:c.Z.wordWrapButtonIcon,"aria-hidden":"true"})})}},37457:function(e,n,t){t.d(n,{Z:()=>c});var r=t(85893);t(67294);var o=t(90496),s=t(56497),i=t(2556),a=t(93757),l=t(62081);function c(e){let{className:n}=e;return(0,r.jsx)(s.Z,{children:()=>(0,r.jsxs)("div",{className:(0,o.Z)(n,l.Z.buttonGroup),children:[(0,r.jsx)(a.Z,{}),(0,r.jsx)(i.Z,{})]})})}},62302:function(e,n,t){t.d(n,{Z:()=>c});var r=t(85893);t(67294);var o=t(90496),s=t(10099),i=t(55951),a=t(88568),l=t(58683);function c(e){let{as:n,...t}=e,c=(0,s.p)(),d=(0,a.QC)(c);return(0,r.jsx)(n,{...t,style:d,className:(0,o.Z)(t.className,l.Z.codeBlockContainer,i.k.common.codeBlock)})}},93002:function(e,n,t){t.d(n,{Z:()=>a});var r=t(85893);t(67294);var o=t(90496),s=t(62302),i=t(18314);function a(e){let{children:n,className:t}=e;return(0,r.jsx)(s.Z,{as:"pre",tabIndex:0,className:(0,o.Z)(i.Z.codeBlockStandalone,"thin-scrollbar",t),children:(0,r.jsx)("code",{className:i.Z.codeBlockLines,children:n})})}},97061:function(e,n,t){t.d(n,{Z:()=>l});var r=t(85893);t(67294);var o=t(26378),s=t(88568),i=t(63461),a=t(65802);function l(e){let n=function(e){let{prism:n}=(0,o.L)();return(0,s.MA)({code:e.children,className:e.className,metastring:e.metastring,magicComments:n.magicComments,defaultLanguage:n.defaultLanguage,language:e.language,title:e.title,showLineNumbers:e.showLineNumbers})}(e),t=(0,i.F)();return(0,r.jsx)(s.EF,{metadata:n,wordWrap:t,children:(0,r.jsx)(a.Z,{})})}},26965:function(e,n,t){t.d(n,{Z:()=>m});var r=t(85893),o=t(67294),s=t(90496),i=t(88568),a=t(10099),l=t(7316),c=t(32028),d=t(18314);let u=o.forwardRef((e,n)=>(0,r.jsx)("pre",{ref:n,tabIndex:0,...e,className:(0,s.Z)(e.className,d.Z.codeBlock,"thin-scrollbar")}));function h(e){let{metadata:n}=(0,i.LS)();return(0,r.jsx)("code",{...e,className:(0,s.Z)(e.className,d.Z.codeBlockLines,void 0!==n.lineNumbersStart&&d.Z.codeBlockLinesWithNumbering),style:{...e.style,counterReset:void 0===n.lineNumbersStart?void 0:`line-count ${n.lineNumbersStart-1}`}})}function m(e){let{className:n}=e,{metadata:t,wordWrap:o}=(0,i.LS)(),d=(0,a.p)(),{code:m,language:p,lineNumbersStart:f,lineClassNames:x}=t;return(0,r.jsx)(l.y$,{theme:d,code:m,language:p,children:e=>{let{className:t,style:i,tokens:a,getLineProps:l,getTokenProps:d}=e;return(0,r.jsx)(u,{ref:o.codeBlockRef,className:(0,s.Z)(n,t),style:i,children:(0,r.jsx)(h,{children:a.map((e,n)=>(0,r.jsx)(c.Z,{line:e,getLineProps:l,getTokenProps:d,classNames:x[n],showLineNumbers:void 0!==f},n))})})}})}},65802:function(e,n,t){t.d(n,{Z:()=>u});var r=t(85893);t(67294);var o=t(90496),s=t(88568),i=t(62302),a=t(923),l=t(26965),c=t(37457),d=t(13112);function u(e){let{className:n}=e,{metadata:t}=(0,s.LS)();return(0,r.jsxs)(i.Z,{as:"div",className:(0,o.Z)(n,t.className),children:[t.title&&(0,r.jsx)("div",{className:d.Z.codeBlockTitle,children:(0,r.jsx)(a.Z,{children:t.title})}),(0,r.jsxs)("div",{className:d.Z.codeBlockContent,children:[(0,r.jsx)(l.Z,{}),(0,r.jsx)(c.Z,{})]})]})}},76458:function(e,n,t){t.d(n,{Z:()=>o});var r=t(85893);function o(e){let{line:n,token:t,...o}=e;return(0,r.jsx)("span",{...o})}t(67294)},32028:function(e,n,t){t.d(n,{Z:()=>a});var r=t(85893);t(67294);var o=t(90496),s=t(76458),i=t(61562);function a(e){let{line:n,classNames:t,showLineNumbers:a,getLineProps:l,getTokenProps:c}=e,d=function(e){let n=1===e.length&&"\n"===e[0].content?e[0]:void 0;return n?[{...n,content:""}]:e}(n),u=l({line:d,className:(0,o.Z)(t,a&&i.Z.codeLine)}),h=d.map((e,n)=>{let t=c({token:e});return(0,r.jsx)(s.Z,{...t,line:d,token:e,children:t.children},n)});return(0,r.jsxs)("span",{...u,children:[a?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:i.Z.codeLineNumber}),(0,r.jsx)("span",{className:i.Z.codeLineContent,children:h})]}):h,(0,r.jsx)("br",{})]})}},923:function(e,n,t){t.d(n,{Z:()=>r});function r(e){let{children:n}=e;return n}},8110:function(e,n,t){t.d(n,{Z:()=>l});var r=t(85893),o=t(67294),s=t(71607),i=t(93002),a=t(97061);function l(e){let{children:n,...t}=e,l=(0,s.Z)(),c=o.Children.toArray(n).some(e=>(0,o.isValidElement)(e))?n:Array.isArray(n)?n.join(""):n,d="string"==typeof c?a.Z:i.Z;return(0,r.jsx)(d,{...t,children:c},String(l))}},31660:function(e,n,t){t.d(n,{Z:()=>o});var r=t(85893);function o(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}t(67294)},87545:function(e,n,t){t.d(n,{Z:()=>o});var r=t(85893);function o(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}t(67294)},67379:function(e,n,t){t.d(n,{Z:()=>o});var r=t(85893);function o(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}t(67294)},42518:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893);t(67294);var o=t(31373),s=t(22438);function i(e){let{toc:n,minHeadingLevel:t,maxHeadingLevel:i}=e;return(0,r.jsx)("div",{className:s.Z.tableOfContentsInline,children:(0,r.jsx)(o.Z,{toc:n,minHeadingLevel:t,maxHeadingLevel:i,className:"table-of-contents",linkClassName:null})})}},77655:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893),o=t(67294),s=t(35363);let i=o.memo(function e(n){let{toc:t,className:o,linkClassName:i,isChild:a}=n;return t.length?(0,r.jsx)("ul",{className:a?void 0:o,children:t.map(n=>(0,r.jsxs)("li",{children:[(0,r.jsx)(s.Z,{to:`#${n.id}`,className:i??void 0,dangerouslySetInnerHTML:{__html:n.value}}),(0,r.jsx)(e,{isChild:!0,toc:n.children,className:o,linkClassName:i})]},n.id))}):null})},31373:function(e,n,t){t.d(n,{Z:()=>c});var r=t(85893),o=t(67294),s=t(26378),i=t(79910),a=t(16394),l=t(77655);function c(e){let{toc:n,className:t="table-of-contents table-of-contents__left-border",linkClassName:c="table-of-contents__link",linkActiveClassName:d,minHeadingLevel:u,maxHeadingLevel:h,...m}=e,p=(0,s.L)(),f=u??p.tableOfContents.minHeadingLevel,x=h??p.tableOfContents.maxHeadingLevel,g=(0,i.b)({toc:n,minHeadingLevel:f,maxHeadingLevel:x}),j=(0,o.useMemo)(()=>{if(c&&d)return{linkClassName:c,linkActiveClassName:d,minHeadingLevel:f,maxHeadingLevel:x}},[c,d,f,x]);return(0,a.S)(j),(0,r.jsx)(l.Z,{toc:g,className:t,linkClassName:c,...m})}},54636:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893);t(67294);var o=t(90496),s=t(55701);function i(e){let{children:n,hidden:t,className:i}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,o.Z)(s.Z.tabItem,i),hidden:t,children:n})}},4575:function(e,n,t){t.d(n,{Z:()=>m});var r=t(85893),o=t(67294),s=t(90496),i=t(54947),a=t(30623),l=t(71607),c=t(93195);function d(e){let{className:n,block:t,selectedValue:o,selectValue:a,tabValues:l}=e,d=[],{blockElementScrollPositionUntilNextRender:u}=(0,i.o5)(),h=e=>{let n=e.currentTarget,t=l[d.indexOf(n)].value;t!==o&&(u(n),a(t))},m=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let t=d.indexOf(e.currentTarget)+1;n=d[t]??d[0];break}case"ArrowLeft":{let t=d.indexOf(e.currentTarget)-1;n=d[t]??d[d.length-1]}}n?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":t},n),children:l.map(e=>{let{value:n,label:t,attributes:i}=e;return(0,r.jsx)("li",{role:"tab",tabIndex:o===n?0:-1,"aria-selected":o===n,ref:e=>{d.push(e)},onKeyDown:m,onClick:h,...i,className:(0,s.Z)("tabs__item",c.Z.tabItem,i?.className,{"tabs__item--active":o===n}),children:t??n},n)})})}function u(e){let{lazy:n,children:t,selectedValue:i}=e,a=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){let e=a.find(e=>e.props.value===i);return e?(0,o.cloneElement)(e,{className:(0,s.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:a.map((e,n)=>(0,o.cloneElement)(e,{key:n,hidden:e.props.value!==i}))})}function h(e){let n=(0,a.Y)(e);return(0,r.jsxs)("div",{className:(0,s.Z)("tabs-container",c.Z.tabList),children:[(0,r.jsx)(d,{...n,...e}),(0,r.jsx)(u,{...n,...e})]})}function m(e){let n=(0,l.Z)();return(0,r.jsx)(h,{...e,children:(0,a.h)(e.children)},String(n))}},63461:function(e,n,t){t.d(n,{F:()=>s});var r=t(67294),o=t(9219);function s(){let[e,n]=(0,r.useState)(!1),[t,s]=(0,r.useState)(!1),i=(0,r.useRef)(null),a=(0,r.useCallback)(()=>{let t=i.current.querySelector("code");e?t.removeAttribute("style"):(t.style.whiteSpace="pre-wrap",t.style.overflowWrap="anywhere"),n(e=>!e)},[i,e]),l=(0,r.useCallback)(()=>{let{scrollWidth:e,clientWidth:n}=i.current;s(e>n||i.current.querySelector("code").hasAttribute("style"))},[i]),[c,d]=(0,r.useState)(),u=(0,r.useCallback)(()=>{d(i.current?.closest("[role=tabpanel][hidden]"))},[i,d]);return(0,r.useEffect)(()=>{u()},[u]),(0,o.I)(c,e=>{e.forEach(e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(l(),u())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1}),(0,r.useEffect)(()=>{l()},[e,l]),(0,r.useEffect)(()=>(window.addEventListener("resize",l,{passive:!0}),()=>{window.removeEventListener("resize",l)}),[l]),{codeBlockRef:i,isEnabled:e,isCodeScrollable:t,toggle:a}}},9219:function(e,n,t){t.d(n,{I:()=>i});var r=t(67294),o=t(50923);let s={attributes:!0,characterData:!0,childList:!0,subtree:!0};function i(e,n){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:s,i=(0,o.zX)(n),a=(0,o.Ql)(t);(0,r.useEffect)(()=>{let n=new MutationObserver(i);return e&&n.observe(e,a),()=>n.disconnect()},[e,i,a])}},10099:function(e,n,t){t.d(n,{p:()=>s});var r=t(45245),o=t(26378);function s(){let{prism:e}=(0,o.L)(),{colorMode:n}=(0,r.I)(),t=e.theme,s=e.darkTheme||t;return"dark"===n?s:t}},16394:function(e,n,t){t.d(n,{S:()=>i});var r=t(67294),o=t(26378);function s(e){let n=e.getBoundingClientRect();return n.top===n.bottom?s(e.parentNode):n}function i(e){let n=(0,r.useRef)(void 0),t=function(){let e=(0,r.useRef)(0),{navbar:{hideOnScroll:n}}=(0,o.L)();return(0,r.useEffect)(()=>{e.current=n?0:document.querySelector(".navbar").clientHeight},[n]),e}();(0,r.useEffect)(()=>{if(!e)return()=>{};let{linkClassName:r,linkActiveClassName:o,minHeadingLevel:i,maxHeadingLevel:a}=e;function l(){let e=Array.from(document.getElementsByClassName(r)),l=function(e,n){let{anchorTopOffset:t}=n,r=e.find(e=>s(e).top>=t);if(r){var o;return(o=s(r)).top>0&&o.bottom<window.innerHeight/2?r:e[e.indexOf(r)-1]??null}return e[e.length-1]??null}(function(e){let{minHeadingLevel:n,maxHeadingLevel:t}=e,r=[];for(let e=n;e<=t;e+=1)r.push(`h${e}.anchor`);return Array.from(document.querySelectorAll(r.join()))}({minHeadingLevel:i,maxHeadingLevel:a}),{anchorTopOffset:t.current}),c=e.find(e=>l&&l.id===decodeURIComponent(e.href.substring(e.href.indexOf("#")+1)));e.forEach(e=>{e===c?(n.current&&n.current!==e&&n.current.classList.remove(o),e.classList.add(o),n.current=e):e.classList.remove(o)})}return document.addEventListener("scroll",l),document.addEventListener("resize",l),l(),()=>{document.removeEventListener("scroll",l),document.removeEventListener("resize",l)}},[e,t])}},88568:function(e,n,t){t.d(n,{EF:()=>j,LS:()=>b,MA:()=>f,QC:()=>x});var r=t(85893),o=t(67294),s=t(90496),i=t(6324),a=t.n(i),l=t(50923);let c=/title=(?<quote>["'])(?<title>.*?)\1/,d=/\{(?<range>[\d,-]+)\}/,u={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},h={...u,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:""}},m=Object.keys(u);function p(e,n){let t=e.map(e=>{let{start:t,end:r}=h[e];return`(?:${t}\\s*(${n.flatMap(e=>[e.line,e.block?.start,e.block?.end].filter(Boolean)).join("|")})\\s*${r})`}).join("|");return RegExp(`^\\s*(?:${t})\\s*$`)}function f(e){var n,t,r;let o=(t=(n={language:e.language,defaultLanguage:e.defaultLanguage,className:e.className}).language??function(e){if(!e)return;let n=e.split(" ").find(e=>e.startsWith("language-"));return n?.replace(/language-/,"")}(n.className)??n.defaultLanguage,t?.toLowerCase()??"text"),{lineClassNames:i,code:l}=function(e,n){let t=e.replace(/\r?\n$/,"");return function(e,n){let{metastring:t,magicComments:r}=n;if(t&&d.test(t)){let n=t.match(d).groups.range;if(0===r.length)throw Error(`A highlight range has been given in code block's metastring (\`\`\` ${t}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);let o=r[0].className;return{lineClassNames:Object.fromEntries(a()(n).filter(e=>e>0).map(e=>[e-1,[o]])),code:e}}return null}(t,{...n})??function(e,n){let{language:t,magicComments:r}=n;if(void 0===t)return{lineClassNames:{},code:e};let o=function(e,n){switch(e){case"js":case"javascript":case"ts":case"typescript":return p(["js","jsBlock"],n);case"jsx":case"tsx":return p(["js","jsBlock","jsx"],n);case"html":return p(["js","jsBlock","html"],n);case"python":case"py":case"bash":return p(["bash"],n);case"markdown":case"md":return p(["html","jsx","bash"],n);case"tex":case"latex":case"matlab":return p(["tex"],n);case"lua":case"haskell":return p(["lua"],n);case"sql":return p(["lua","jsBlock"],n);case"wasm":return p(["wasm"],n);case"vb":case"vba":case"visual-basic":return p(["vb","rem"],n);case"vbnet":return p(["vbnet","rem"],n);case"batch":return p(["rem"],n);case"basic":return p(["rem","f90"],n);case"fsharp":return p(["js","ml"],n);case"ocaml":case"sml":return p(["ml"],n);case"fortran":return p(["f90"],n);case"cobol":return p(["cobol"],n);default:return p(m,n)}}(t,r),s=e.split(/\r?\n/),i=Object.fromEntries(r.map(e=>[e.className,{start:0,range:""}])),l=Object.fromEntries(r.filter(e=>e.line).map(e=>{let{className:n,line:t}=e;return[t,n]})),c=Object.fromEntries(r.filter(e=>e.block).map(e=>{let{className:n,block:t}=e;return[t.start,n]})),d=Object.fromEntries(r.filter(e=>e.block).map(e=>{let{className:n,block:t}=e;return[t.end,n]}));for(let e=0;e<s.length;){let n=s[e].match(o);if(!n){e+=1;continue}let t=n.slice(1).find(e=>void 0!==e);l[t]?i[l[t]].range+=`${e},`:c[t]?i[c[t]].start=e:d[t]&&(i[d[t]].range+=`${i[d[t]].start}-${e-1},`),s.splice(e,1)}let u={};return Object.entries(i).forEach(e=>{let[n,{range:t}]=e;a()(t).forEach(e=>{u[e]??=[],u[e].push(n)})}),{code:s.join("\n"),lineClassNames:u}}(t,{...n})}(e.code,{metastring:e.metastring,magicComments:e.magicComments,language:o}),u=function(e){let{className:n,language:t}=e;return(0,s.Z)(n,t&&!n?.includes(`language-${t}`)&&`language-${t}`)}({className:e.className,language:o}),h=(r=e.metastring,(r?.match(c)?.groups.title??"")||e.title),f=function(e){let{showLineNumbers:n,metastring:t}=e;if("boolean"==typeof n)return n?1:void 0;if("number"==typeof n)return n;let r=t?.split(" ").find(e=>e.startsWith("showLineNumbers"));if(r)return r.startsWith("showLineNumbers=")?parseInt(r.replace("showLineNumbers=",""),10):1}({showLineNumbers:e.showLineNumbers,metastring:e.metastring});return{codeInput:e.code,code:l,className:u,language:o,title:h,lineNumbersStart:f,lineClassNames:i}}function x(e){let n={color:"--prism-color",backgroundColor:"--prism-background-color"},t={};return Object.entries(e.plain).forEach(e=>{let[r,o]=e,s=n[r];s&&"string"==typeof o&&(t[s]=o)}),t}let g=(0,o.createContext)(null);function j(e){let{metadata:n,wordWrap:t,children:s}=e,i=(0,o.useMemo)(()=>({metadata:n,wordWrap:t}),[n,t]);return(0,r.jsx)(g.Provider,{value:i,children:s})}function b(){let e=(0,o.useContext)(g);if(null===e)throw new l.i6("CodeBlockContextProvider");return e}},30623:function(e,n,t){t.d(n,{Y:()=>u,h:()=>c});var r=t(67294),o=t(3620),s=t(844),i=t(97486),a=t(32263),l=t(16971);function c(e){return r.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,r.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})?.filter(Boolean)??[]}function d(e){let{value:n,tabValues:t}=e;return t.some(e=>e.value===n)}function u(e){let{defaultValue:n,queryString:t=!1,groupId:u}=e,h=function(e){let{values:n,children:t}=e;return(0,r.useMemo)(()=>{let e=n??c(t).map(e=>{let{props:{value:n,label:t,attributes:r,default:o}}=e;return{value:n,label:t,attributes:r,default:o}}),r=(0,a.lx)(e,(e,n)=>e.value===n.value);if(r.length>0)throw Error(`Docusaurus error: Duplicate values "${r.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[n,t])}(e),[m,p]=(0,r.useState)(()=>(function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!d({value:n,tabValues:t}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let r=t.find(e=>e.default)??t[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:n,tabValues:h})),[f,x]=function(e){let{queryString:n=!1,groupId:t}=e,s=(0,o.k6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,i._X)(a),(0,r.useCallback)(e=>{if(!a)return;let n=new URLSearchParams(s.location.search);n.set(a,e),s.replace({...s.location,search:n.toString()})},[a,s])]}({queryString:t,groupId:u}),[g,j]=function(e){let{groupId:n}=e,t=n?`docusaurus.tab.${n}`:null,[o,s]=(0,l.Nk)(t);return[o,(0,r.useCallback)(e=>{t&&s.set(e)},[t,s])]}({groupId:u}),b=(()=>{let e=f??g;return d({value:e,tabValues:h})?e:null})();return(0,s.Z)(()=>{b&&p(b)},[b]),{selectedValue:m,selectValue:(0,r.useCallback)(e=>{if(!d({value:e,tabValues:h}))throw Error(`Can't select invalid tab value=${e}`);p(e),x(e),j(e)},[x,j,h]),tabValues:h}}},79910:function(e,n,t){t.d(n,{b:()=>o});var r=t(67294);function o(e){let{toc:n,minHeadingLevel:t,maxHeadingLevel:o}=e;return(0,r.useMemo)(()=>(function e(n){let{toc:t,minHeadingLevel:r,maxHeadingLevel:o}=n;return t.flatMap(n=>{let t=e({toc:n.children,minHeadingLevel:r,maxHeadingLevel:o});return n.level>=r&&n.level<=o?[{...n,children:t}]:t})})({toc:function(e){let n=e.map(e=>({...e,parentIndex:-1,children:[]})),t=Array(7).fill(-1);n.forEach((e,n)=>{let r=t.slice(2,e.level);e.parentIndex=Math.max(...r),t[e.level]=n});let r=[];return n.forEach(e=>{let{parentIndex:t,...o}=e;t>=0?n[t].children.push(o):r.push(o)}),r}(n),minHeadingLevel:t,maxHeadingLevel:o}),[n,t,o])}},5626:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893);t(67294);var o=t(8110),s=t(80483);function i(e){return e.live?(0,r.jsx)(s.Z,{...e}):(0,r.jsx)(o.Z,{...e})}},80483:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893);t(67294);var o=t(35010),s=t(62529);function i(e){return(0,r.jsx)(o.Z,{scope:s.Z,...e})}},57829:function(e,n,t){t.d(n,{Z:()=>s});var r=t(85893);t(67294);var o=t(43335);function s(e){let{children:n}=e;return(0,r.jsx)("div",{className:o.Z.playgroundContainer,children:n})}},49522:function(e,n,t){t.d(n,{Z:()=>c});var r=t(85893);t(67294);var o=t(62905),s=t(71607),i=t(77827),a=t(83372),l=t(7512);function c(){let e=(0,s.Z)();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.Z,{children:(0,r.jsx)(i.Z,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,r.jsx)(o.uz,{className:l.Z.playgroundEditor},String(e))]})}},83372:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893);t(67294);var o=t(90496),s=t(926);function i(e){let{children:n}=e;return(0,r.jsx)("div",{className:(0,o.Z)(s.Z.playgroundHeader),children:n})}},45188:function(e,n,t){t.d(n,{Z:()=>a});var r=t(85893);t(67294);var o=t(26378),s=t(67191),i=t(49522);function a(){let{playgroundPosition:e}=(0,o.L)().liveCodeBlock;return(0,r.jsx)(r.Fragment,{children:"top"===e?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.Z,{}),(0,r.jsx)(i.Z,{})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i.Z,{}),(0,r.jsx)(s.Z,{})]})})}},67191:function(e,n,t){t.d(n,{Z:()=>m});var r=t(85893);t(67294);var o=t(62905),s=t(56497),i=t(12565),a=t(83176),l=t(77827),c=t(83372),d=t(25562);function u(){return(0,r.jsx)("div",{children:"Loading..."})}function h(){return(0,r.jsx)(s.Z,{fallback:(0,r.jsx)(u,{}),children:()=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.Z,{fallback:e=>(0,r.jsx)(i.Ac,{...e}),children:(0,r.jsx)(o.i5,{})}),(0,r.jsx)(o.IF,{})]})})}function m(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(c.Z,{children:(0,r.jsx)(l.Z,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,r.jsx)("div",{className:d.Z.playgroundPreview,children:(0,r.jsx)(h,{})})]})}},9002:function(e,n,t){t.d(n,{Z:()=>a});var r=t(85893);t(67294);var o=t(62905),s=t(10099);let i=e=>`${e};`;function a(e){let{code:n,children:t,...a}=e,l=(0,s.p)(),c=a.metastring?.includes("noInline")??!1;return(0,r.jsx)(o.nu,{noInline:c,theme:l,...a,code:n?.replace(/\n$/,""),transformCode:a.transformCode??i,children:t})}},35010:function(e,n,t){t.d(n,{Z:()=>a});var r=t(85893);t(67294);var o=t(9002),s=t(57829),i=t(45188);function a(e){let{children:n,transformCode:t,...a}=e;return(0,r.jsx)(s.Z,{children:(0,r.jsx)(o.Z,{code:n,...a,children:(0,r.jsx)(i.Z,{})})})}},56497:function(e,n,t){t.d(n,{Z:()=>s});var r=t(85893);t(67294);var o=t(71607);function s(e){let{children:n,fallback:t}=e;return(0,o.Z)()?(0,r.jsx)(r.Fragment,{children:n?.()}):t??null}},44456:function(e,n,t){t.d(n,{Z:()=>i});var r=t(85893);t(67294);var o=t(90496),s=t(67079);function i(e){let{children:n,minHeight:t,url:i="http://localhost:3000",style:a,bodyStyle:l}=e;return(0,r.jsxs)("div",{className:s.Z.browserWindow,style:{...a,minHeight:t},children:[(0,r.jsxs)("div",{className:s.Z.browserWindowHeader,children:[(0,r.jsxs)("div",{className:s.Z.buttons,children:[(0,r.jsx)("span",{className:s.Z.dot,style:{background:"#f25f58"}}),(0,r.jsx)("span",{className:s.Z.dot,style:{background:"#fbbe3c"}}),(0,r.jsx)("span",{className:s.Z.dot,style:{background:"#58cb42"}})]}),(0,r.jsx)("div",{className:(0,o.Z)(s.Z.browserWindowAddressBar,"text--truncate"),children:i}),(0,r.jsx)("div",{className:s.Z.browserWindowMenuIcon,children:(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:s.Z.bar}),(0,r.jsx)("span",{className:s.Z.bar}),(0,r.jsx)("span",{className:s.Z.bar})]})})]}),(0,r.jsx)("div",{className:s.Z.browserWindowBody,style:l,children:n})]})}},14547:function(e,n,t){t.d(n,{Z:()=>s});var r=t(85893);t(67294);var o=t(5626);function s(e){return(0,r.jsx)(o.Z,{...e})}},63627:function(e,n,t){t.r(n),t.d(n,{ButtonExample:()=>o});var r=t(85893);function o(e){return(0,r.jsx)("button",{type:"button",...e,style:{backgroundColor:"white",color:"black",border:"solid red",borderRadius:20,padding:10,cursor:"pointer",...e.style}})}t(67294)},62529:function(e,n,t){t.d(n,{Z:()=>s});var r=t(67294),o=t(63627);let s={React:r,...r,...o}},75079:function(e){e.exports=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":1748625776000,"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"}}')}}]);
Reference in a new issue View git blame Copy permalink