3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-01 10:22:30 +02:00
Code Issues Projects Releases Packages Wiki Activity
docusaurus/assets/js/64dfb3e9.a8d1ce34.js
slorber 5e56e3954a deploy: d5885c0c5d
2024-08-27 11:55:47 +00:00

1 line
No EOL
55 KiB
JavaScript
Raw Blame History

"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[44027],{97408:(e,t,n)=>{n.d(t,{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"},41124:(e,t,n)=>{n.d(t,{Z:()=>i});var r=n(24246);n(27378);var o=n(4646);function i({toc:e,minHeadingLevel:t,maxHeadingLevel:n}){return(0,r.jsx)("div",{className:"tableOfContentsInline_2sru",children:(0,r.jsx)(o.Z,{toc:e,minHeadingLevel:t,maxHeadingLevel:n,className:"table-of-contents",linkClassName:null})})}},4646:(e,t,n)=>{n.d(t,{Z:()=>u});var r=n(24246),o=n(27378),i=n(73919);function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}function c(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}function a(e){let t=e.getBoundingClientRect();return t.top===t.bottom?a(e.parentNode):t}var l=n(41428);let d=o.memo(function e({toc:t,className:n,linkClassName:o,isChild:i}){return t.length?(0,r.jsx)("ul",{className:i?void 0:n,children:t.map(t=>(0,r.jsxs)("li",{children:[(0,r.jsx)(l.Z,{to:`#${t.id}`,className:null!=o?o:void 0,dangerouslySetInnerHTML:{__html:t.value}}),(0,r.jsx)(e,{isChild:!0,toc:t.children,className:n,linkClassName:o})]},t.id))}):null});function u(e){var{toc:t,className:n="table-of-contents table-of-contents__left-border",linkClassName:l="table-of-contents__link",linkActiveClassName:u,minHeadingLevel:p,maxHeadingLevel:h}=e,m=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["toc","className","linkClassName","linkActiveClassName","minHeadingLevel","maxHeadingLevel"]);let f=(0,i.L)(),b=null!=p?p:f.tableOfContents.minHeadingLevel,j=null!=h?h:f.tableOfContents.maxHeadingLevel,g=function({toc:e,minHeadingLevel:t,maxHeadingLevel:n}){return(0,o.useMemo)(()=>(function e({toc:t,minHeadingLevel:n,maxHeadingLevel:r}){return t.flatMap(t=>{let o=e({toc:t.children,minHeadingLevel:n,maxHeadingLevel:r});return t.level>=n&&t.level<=r?[c(s({},t),{children:o})]:o})})({toc:function(e){let t=e.map(e=>c(s({},e),{parentIndex:-1,children:[]})),n=Array(7).fill(-1);t.forEach((e,t)=>{let r=n.slice(2,e.level);e.parentIndex=Math.max(...r),n[e.level]=t});let r=[];return t.forEach(e=>{let{parentIndex:n}=e,o=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["parentIndex"]);n>=0?t[n].children.push(o):r.push(o)}),r}(e),minHeadingLevel:t,maxHeadingLevel:n}),[e,t,n])}({toc:t,minHeadingLevel:b,maxHeadingLevel:j});return!function(e){let t=(0,o.useRef)(void 0),n=function(){let e=(0,o.useRef)(0),{navbar:{hideOnScroll:t}}=(0,i.L)();return(0,o.useEffect)(()=>{e.current=t?0:document.querySelector(".navbar").clientHeight},[t]),e}();(0,o.useEffect)(()=>{if(!e)return()=>{};let{linkClassName:r,linkActiveClassName:o,minHeadingLevel:i,maxHeadingLevel:s}=e;function c(){let e=Array.from(document.getElementsByClassName(r)),c=function(e,{anchorTopOffset:t}){var n,r,o;let i=e.find(e=>a(e).top>=t);return i?(o=a(i)).top>0&&o.bottom<window.innerHeight/2?i:null!==(n=e[e.indexOf(i)-1])&&void 0!==n?n:null:null!==(r=e[e.length-1])&&void 0!==r?r:null}(function({minHeadingLevel:e,maxHeadingLevel:t}){let n=[];for(let r=e;r<=t;r+=1)n.push(`h${r}.anchor`);return Array.from(document.querySelectorAll(n.join()))}({minHeadingLevel:i,maxHeadingLevel:s}),{anchorTopOffset:n.current}),l=e.find(e=>c&&c.id===decodeURIComponent(e.href.substring(e.href.indexOf("#")+1)));e.forEach(e=>{e===l?(t.current&&t.current!==e&&t.current.classList.remove(o),e.classList.add(o),t.current=e):e.classList.remove(o)})}return document.addEventListener("scroll",c),document.addEventListener("resize",c),c(),()=>{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}},[e,n])}((0,o.useMemo)(()=>{if(l&&u)return{linkClassName:l,linkActiveClassName:u,minHeadingLevel:b,maxHeadingLevel:j}},[l,u,b,j])),(0,r.jsx)(d,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({toc:g,className:n,linkClassName:l},m))}},61132:(e,t,n)=>{n.d(t,{Z:()=>i});var r=n(24246);n(27378);var o=n(40624);function i({children:e,hidden:t,className:n}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,o.Z)("tabItem_pnkT",n),hidden:t,children:e})}},97555:(e,t,n)=>{n.d(t,{Z:()=>x});var r=n(24246),o=n(27378),i=n(40624),s=n(75527),c=n(3620),a=n(44479),l=n(62821),d=n(52196),u=n(53589);function p(e){var t,n;return null!==(n=null===(t=o.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,o.isValidElement)(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(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.`)}))||void 0===t?void 0:t.filter(Boolean))&&void 0!==n?n:[]}function h({value:e,tabValues:t}){return t.some(t=>t.value===e)}var m=n(29088);function f(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}function b(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}function j({className:e,block:t,selectedValue:n,selectValue:o,tabValues:c}){let a=[],{blockElementScrollPositionUntilNextRender:l}=(0,s.o5)(),d=e=>{let t=e.currentTarget,r=c[a.indexOf(t)].value;r!==n&&(l(t),o(r))},u=e=>{var t,n;let r=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{let n=a.indexOf(e.currentTarget)+1;r=null!==(t=a[n])&&void 0!==t?t:a[0];break}case"ArrowLeft":{let t=a.indexOf(e.currentTarget)-1;r=null!==(n=a[t])&&void 0!==n?n:a[a.length-1]}}null==r||r.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":t},e),children:c.map(({value:e,label:t,attributes:o})=>(0,r.jsx)("li",b(f({role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>a.push(e),onKeyDown:u,onClick:d},o),{className:(0,i.Z)("tabs__item","tabItem_AQgk",null==o?void 0:o.className,{"tabs__item--active":n===e}),children:null!=t?t:e}),e))})}function g({lazy:e,children:t,selectedValue:n}){let s=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){let e=s.find(e=>e.props.value===n);return e?(0,o.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:s.map((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==n}))})}function y(e){let t=function(e){let{defaultValue:t,queryString:n=!1,groupId:r}=e,i=function(e){let{values:t,children:n}=e;return(0,o.useMemo)(()=>{let e=null!=t?t:p(n).map(({props:{value:e,label:t,attributes:n,default:r}})=>({value:e,label:t,attributes:n,default:r}));return!function(e){let t=(0,d.lx)(e,(e,t)=>e.value===t.value);if(t.length>0)throw Error(`Docusaurus error: Duplicate values "${t.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e},[t,n])}(e),[s,m]=(0,o.useState)(()=>(function({defaultValue:e,tabValues:t}){var n;if(0===t.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!h({value:e,tabValues:t}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" 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 e}let r=null!==(n=t.find(e=>e.default))&&void 0!==n?n:t[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:t,tabValues:i})),[f,b]=function({queryString:e=!1,groupId:t}){let n=(0,c.k6)(),r=function({queryString:e=!1,groupId:t}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!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 null!=t?t:null}({queryString:e,groupId:t});return[(0,l._X)(r),(0,o.useCallback)(e=>{var t,o;if(!r)return;let i=new URLSearchParams(n.location.search);i.set(r,e),n.replace((t=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({},n.location),o=o={search:i.toString()},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}),t))},[r,n])]}({queryString:n,groupId:r}),[j,g]=function({groupId:e}){let t=e?`docusaurus.tab.${e}`:null,[n,r]=(0,u.Nk)(t);return[n,(0,o.useCallback)(e=>{t&&r.set(e)},[t,r])]}({groupId:r}),y=(()=>{let e=null!=f?f:j;return h({value:e,tabValues:i})?e:null})();return(0,a.Z)(()=>{y&&m(y)},[y]),{selectedValue:s,selectValue:(0,o.useCallback)(e=>{if(!h({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);m(e),b(e),g(e)},[b,g,i]),tabValues:i}}(e);return(0,r.jsxs)("div",{className:(0,i.Z)("tabs-container","tabList_Qoir"),children:[(0,r.jsx)(j,f({},t,e)),(0,r.jsx)(g,f({},t,e))]})}function x(e){let t=(0,m.Z)();return(0,r.jsx)(y,b(f({},e),{children:p(e.children)}),String(t))}},94544:(e,t,n)=>{n.d(t,{Z:()=>i});var r=n(24246);n(27378);var o=n(29088);function i({children:e,fallback:t}){return(0,o.Z)()?(0,r.jsx)(r.Fragment,{children:null==e?void 0:e()}):null!=t?t:null}},6698:(e,t,n)=>{n.d(t,{Z:()=>c});var r=n(24246);n(27378);var o=n(40624);let i="dot_giz1",s="bar_rrRL";function c({children:e,minHeight:t,url:n="http://localhost:3000",style:c,bodyStyle:a}){var l,d;return(0,r.jsxs)("div",{className:"browserWindow_my1Q",style:(l=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({},c),d=d={minHeight:t},Object.getOwnPropertyDescriptors?Object.defineProperties(l,Object.getOwnPropertyDescriptors(d)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(d)).forEach(function(e){Object.defineProperty(l,e,Object.getOwnPropertyDescriptor(d,e))}),l),children:[(0,r.jsxs)("div",{className:"browserWindowHeader_jXSR",children:[(0,r.jsxs)("div",{className:"buttons_uHc7",children:[(0,r.jsx)("span",{className:i,style:{background:"#f25f58"}}),(0,r.jsx)("span",{className:i,style:{background:"#fbbe3c"}}),(0,r.jsx)("span",{className:i,style:{background:"#58cb42"}})]}),(0,r.jsx)("div",{className:(0,o.Z)("browserWindowAddressBar_Pd8y","text--truncate"),children:n}),(0,r.jsx)("div",{className:"browserWindowMenuIcon_Vhuh",children:(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:s}),(0,r.jsx)("span",{className:s}),(0,r.jsx)("span",{className:s})]})})]}),(0,r.jsx)("div",{className:"browserWindowBody_Idgs",style:a,children:e})]})}},38112:(e,t,n)=>{n.d(t,{Z:()=>ec});var r,o,i,s={};n.r(s),n.d(s,{ButtonExample:()=>M});var c=n(24246),a=n(27378),l=n(40624),d=n(29088),u=n(32711),p=n(36712),h=n(4423),m=n(94544),f=n(30691),b=n(78844),j=n(73919);function g(){let{prism:e}=(0,j.L)(),{colorMode:t}=(0,b.I)(),n=e.theme,r=e.darkTheme||n;return"dark"===t?r:n}var y=n(88941);function x(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}function O({children:e}){return(0,c.jsx)("div",{className:(0,l.Z)("playgroundHeader_Tvsk"),children:e})}function v(){return(0,c.jsx)("div",{children:"Loading..."})}function w(){return(0,c.jsx)(m.Z,{fallback:(0,c.jsx)(v,{}),children:()=>(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(y.Z,{fallback:e=>(0,c.jsx)(f.Ac,x({},e)),children:(0,c.jsx)(u.i5,{})}),(0,c.jsx)(u.IF,{})]})})}function k(){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(O,{children:(0,c.jsx)(p.Z,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,c.jsx)("div",{className:"playgroundPreview_mApW",children:(0,c.jsx)(w,{})})]})}function P(){let e=(0,d.Z)();return(0,c.jsx)(u.uz,{className:"playgroundEditor_TySg"},String(e))}function D(){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(O,{children:(0,c.jsx)(p.Z,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,c.jsx)(P,{})]})}let S=e=>`${e};`;function C(e){var t,n,r,o,{children:i,transformCode:s}=e,a=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["children","transformCode"]);let{siteConfig:{themeConfig:l}}=(0,h.Z)(),{liveCodeBlock:{playgroundPosition:d}}=l,p=g(),m=null!==(o=null===(r=a.metastring)||void 0===r?void 0:r.includes("noInline"))&&void 0!==o&&o;return(0,c.jsx)("div",{className:"playgroundContainer_6Ior",children:(0,c.jsx)(u.nu,(t=x({code:null==i?void 0:i.replace(/\n$/,""),noInline:m,transformCode:null!=s?s:S,theme:p},a),n=n={children:"top"===d?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(k,{}),(0,c.jsx)(D,{})]}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(D,{}),(0,c.jsx)(k,{})]})},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}),t))})}function N(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}function M(e){var t,n;return(0,c.jsx)("button",(t=N({type:"button"},e),n=n={style:N({backgroundColor:"white",color:"black",border:"solid red",borderRadius:20,padding:10,cursor:"pointer"},e.style)},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}),t))}let E=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({React:a},a,s);var B=n(89583),I=n(6324),T=n.n(I);let L=RegExp("title=(?<quote>[\"'])(?<title>.*?)\\1"),X=RegExp("\\{(?<range>[\\d,-]+)\\}"),H={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"<!--",end:"-->"}},_=(r=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({},H),o=o={lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(o)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}),r),Z=Object.keys(H);function R(e,t){let n=e.map(e=>{let{start:n,end:r}=_[e];return`(?:${n}\\s*(${t.flatMap(e=>{var t,n;return[e.line,null===(t=e.block)||void 0===t?void 0:t.start,null===(n=e.block)||void 0===n?void 0:n.end].filter(Boolean)}).join("|")})\\s*${r})`}).join("|");return RegExp(`^\\s*(?:${n})\\s*$`)}function A(e){var t,n,{as:r}=e,o=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["as"]);let i=function(e){let t={color:"--prism-color",backgroundColor:"--prism-background-color"},n={};return Object.entries(e.plain).forEach(([e,r])=>{let o=t[e];o&&"string"==typeof r&&(n[o]=r)}),n}(g());return(0,c.jsx)(r,(t=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({},o),n=n={style:i,className:(0,l.Z)(o.className,"codeBlockContainer_jDV4",B.k.common.codeBlock)},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}),t))}let F={codeBlockContent:"codeBlockContent_vx7S",codeBlockTitle:"codeBlockTitle_bdru",codeBlock:"codeBlock_Gebt",codeBlockStandalone:"codeBlockStandalone_i_cY",codeBlockLines:"codeBlockLines_FJaf",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_FU9Q",buttonGroup:"buttonGroup_cUGO"};function W({children:e,className:t}){return(0,c.jsx)(A,{as:"pre",tabIndex:0,className:(0,l.Z)(F.codeBlockStandalone,"thin-scrollbar",t),children:(0,c.jsx)("code",{className:F.codeBlockLines,children:e})})}var z=n(51114);let $={attributes:!0,characterData:!0,childList:!0,subtree:!0};var J=n(26101);let U={codeLine:"codeLine_qRmp",codeLineNumber:"codeLineNumber_dS_J",codeLineContent:"codeLineContent_XF5l"};function q(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}function V({line:e,classNames:t,showLineNumbers:n,getLineProps:r,getTokenProps:o}){var i,s;1===e.length&&"\n"===e[0].content&&(e[0].content="");let a=r({line:e,className:(0,l.Z)(t,n&&U.codeLine)}),d=e.map((e,t)=>(0,c.jsx)("span",q({},o({token:e})),t));return(0,c.jsxs)("span",(i=q({},a),s=s={children:[n?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("span",{className:U.codeLineNumber}),(0,c.jsx)("span",{className:U.codeLineContent,children:d})]}):d,(0,c.jsx)("br",{})]},Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(s)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(s)).forEach(function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(s,e))}),i))}var Q=n(34370);function Y(e){var t,n;return(0,c.jsx)("svg",(t=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({viewBox:"0 0 24 24"},e),n=n={children:(0,c.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}),t))}function G(e){var t,n;return(0,c.jsx)("svg",(t=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({viewBox:"0 0 24 24"},e),n=n={children:(0,c.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}),t))}let K={copyButtonCopied:"copyButtonCopied_OkN_",copyButtonIcons:"copyButtonIcons_OqsO",copyButtonIcon:"copyButtonIcon_PgCn",copyButtonSuccessIcon:"copyButtonSuccessIcon_bsQG"};function ee({code:e,className:t}){let[n,r]=(0,a.useState)(!1),o=(0,a.useRef)(void 0),i=(0,a.useCallback)(()=>{(0,Q.Z)(e),r(!0),o.current=window.setTimeout(()=>{r(!1)},1e3)},[e]);return(0,a.useEffect)(()=>()=>window.clearTimeout(o.current),[]),(0,c.jsx)("button",{type:"button","aria-label":n?(0,p.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,p.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,p.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,l.Z)("clean-btn",t,K.copyButton,n&&K.copyButtonCopied),onClick:i,children:(0,c.jsxs)("span",{className:K.copyButtonIcons,"aria-hidden":"true",children:[(0,c.jsx)(Y,{className:K.copyButtonIcon}),(0,c.jsx)(G,{className:K.copyButtonSuccessIcon})]})})}function et(e){var t,n;return(0,c.jsx)("svg",(t=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({viewBox:"0 0 24 24"},e),n=n={children:(0,c.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}),t))}let en={wordWrapButtonIcon:"wordWrapButtonIcon_MQXS",wordWrapButtonEnabled:"wordWrapButtonEnabled_TBIH"};function er({className:e,onClick:t,isEnabled:n}){let r=(0,p.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,c.jsx)("button",{type:"button",onClick:t,className:(0,l.Z)("clean-btn",e,n&&en.wordWrapButtonEnabled),"aria-label":r,title:r,children:(0,c.jsx)(et,{className:en.wordWrapButtonIcon,"aria-hidden":"true"})})}function eo({children:e,className:t="",metastring:n,title:r,showLineNumbers:o,language:i}){var s,d,u,p;let{prism:{defaultLanguage:h,magicComments:m}}=(0,j.L)(),f=null==(d=null!==(s=null!=i?i:function(e){let t=e.split(" ").find(e=>e.startsWith("language-"));return null==t?void 0:t.replace(/language-/,"")}(t))&&void 0!==s?s:h)?void 0:d.toLowerCase(),b=g(),y=function(){let[e,t]=(0,a.useState)(!1),[n,r]=(0,a.useState)(!1),o=(0,a.useRef)(null),i=(0,a.useCallback)(()=>{let n=o.current.querySelector("code");e?n.removeAttribute("style"):(n.style.whiteSpace="pre-wrap",n.style.overflowWrap="anywhere"),t(e=>!e)},[o,e]),s=(0,a.useCallback)(()=>{let{scrollWidth:e,clientWidth:t}=o.current;r(e>t||o.current.querySelector("code").hasAttribute("style"))},[o]);return!function(e,t){let[n,r]=(0,a.useState)(),o=(0,a.useCallback)(()=>{var t;r(null===(t=e.current)||void 0===t?void 0:t.closest("[role=tabpanel][hidden]"))},[e,r]);(0,a.useEffect)(()=>{o()},[o]),function(e,t,n=$){let r=(0,z.zX)(t),o=(0,z.Ql)(n);(0,a.useEffect)(()=>{let t=new MutationObserver(r);return e&&t.observe(e,o),()=>t.disconnect()},[e,r,o])}(n,e=>{e.forEach(e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(t(),o())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1})}(o,s),(0,a.useEffect)(()=>{s()},[e,s]),(0,a.useEffect)(()=>(window.addEventListener("resize",s,{passive:!0}),()=>{window.removeEventListener("resize",s)}),[s]),{codeBlockRef:o,isEnabled:e,isCodeScrollable:n,toggle:i}}(),x=(null!==(p=null==n?void 0:null===(u=n.match(L))||void 0===u?void 0:u.groups.title)&&void 0!==p?p:"")||r,{lineClassNames:O,code:v}=function(e,t){let n=e.replace(/\n$/,""),{language:r,magicComments:o,metastring:i}=t;if(i&&X.test(i)){let e=i.match(X).groups.range;if(0===o.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 t=o[0].className;return{lineClassNames:Object.fromEntries(T()(e).filter(e=>e>0).map(e=>[e-1,[t]])),code:n}}if(void 0===r)return{lineClassNames:{},code:n};let s=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return R(["js","jsBlock"],t);case"jsx":case"tsx":return R(["js","jsBlock","jsx"],t);case"html":return R(["js","jsBlock","html"],t);case"python":case"py":case"bash":return R(["bash"],t);case"markdown":case"md":return R(["html","jsx","bash"],t);case"tex":case"latex":case"matlab":return R(["tex"],t);case"lua":case"haskell":case"sql":return R(["lua"],t);case"wasm":return R(["wasm"],t);case"vb":case"vba":case"visual-basic":return R(["vb","rem"],t);case"vbnet":return R(["vbnet","rem"],t);case"batch":return R(["rem"],t);case"basic":return R(["rem","f90"],t);case"fsharp":return R(["js","ml"],t);case"ocaml":case"sml":return R(["ml"],t);case"fortran":return R(["f90"],t);case"cobol":return R(["cobol"],t);default:return R(Z,t)}}(r,o),c=n.split("\n"),a=Object.fromEntries(o.map(e=>[e.className,{start:0,range:""}])),l=Object.fromEntries(o.filter(e=>e.line).map(({className:e,line:t})=>[t,e])),d=Object.fromEntries(o.filter(e=>e.block).map(({className:e,block:t})=>[t.start,e])),u=Object.fromEntries(o.filter(e=>e.block).map(({className:e,block:t})=>[t.end,e]));for(let e=0;e<c.length;){let t=c[e].match(s);if(!t){e+=1;continue}let n=t.slice(1).find(e=>void 0!==e);l[n]?a[l[n]].range+=`${e},`:d[n]?a[d[n]].start=e:u[n]&&(a[u[n]].range+=`${a[u[n]].start}-${e-1},`),c.splice(e,1)}n=c.join("\n");let p={};return Object.entries(a).forEach(([e,{range:t}])=>{T()(t).forEach(t=>{var n;null!==(n=p[t])&&void 0!==n||(p[t]=[]),p[t].push(e)})}),{lineClassNames:p,code:n}}(e,{metastring:n,language:f,magicComments:m}),w=null!=o?o:!!(null==n?void 0:n.includes("showLineNumbers"));return(0,c.jsxs)(A,{as:"div",className:(0,l.Z)(t,f&&!t.includes(`language-${f}`)&&`language-${f}`),children:[x&&(0,c.jsx)("div",{className:F.codeBlockTitle,children:x}),(0,c.jsxs)("div",{className:F.codeBlockContent,children:[(0,c.jsx)(J.y$,{theme:b,code:v,language:null!=f?f:"text",children:({className:e,style:t,tokens:n,getLineProps:r,getTokenProps:o})=>(0,c.jsx)("pre",{tabIndex:0,ref:y.codeBlockRef,className:(0,l.Z)(e,F.codeBlock,"thin-scrollbar"),style:t,children:(0,c.jsx)("code",{className:(0,l.Z)(F.codeBlockLines,w&&F.codeBlockLinesWithNumbering),children:n.map((e,t)=>(0,c.jsx)(V,{line:e,getLineProps:r,getTokenProps:o,classNames:O[t],showLineNumbers:w},t))})})}),(0,c.jsxs)("div",{className:F.buttonGroup,children:[(y.isEnabled||y.isCodeScrollable)&&(0,c.jsx)(er,{className:F.codeButton,onClick:()=>y.toggle(),isEnabled:y.isEnabled}),(0,c.jsx)(ee,{className:F.codeButton,code:v})]})]})]})}function ei(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}let es=(i=function(e){var t,n,{children:r}=e,o=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["children"]);let i=(0,d.Z)(),s=a.Children.toArray(r).some(e=>(0,a.isValidElement)(e))?r:Array.isArray(r)?r.join(""):r,l="string"==typeof s?eo:W;return(0,c.jsx)(l,(t=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({},o),n=n={children:s},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}),t),String(i))},function(e){return e.live?(0,c.jsx)(C,ei({scope:E},e)):(0,c.jsx)(i,ei({},e))});function ec(e){return(0,c.jsx)(es,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({},e))}},77132:(e,t,n)=>{n.r(t),n.d(t,{Highlight:()=>b,assets:()=>f,contentTitle:()=>h,default:()=>y,frontMatter:()=>p,metadata:()=>m,toc:()=>j});var r=n(24246),o=n(71670),i=n(6698),s=n(97555),c=n(61132),a=n(38112),l=n(97408);function d(e){let t={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)(t.p,{children:["This is text some content from ",(0,r.jsx)(t.code,{children:"_markdown-partial-example.md"}),"."]})]})}function u(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}n(41124);let p={id:"react",description:"Using the power of React in Docusaurus Markdown documents, thanks to MDX",slug:"/markdown-features/react"},h="MDX and React",m={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:!1,unlisted:!1,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:1724759565e3,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"}},f={},b=({children:e,color:t})=>{let n={span:"span",...(0,o.a)()};return(0,r.jsx)(n.span,{style:{backgroundColor:t,borderRadius:"2px",color:"#fff",padding:"0.2rem"},children:e})},j=[{value:"Exporting components",id:"exporting-components",level:3},{value:"Importing components",id:"importing-components",level:3},{value:"MDX component scope",id:"mdx-component-scope",level:3},{value:"Markdown and JSX interoperability",id:"markdown-and-jsx-interoperability",level:3},{value:"Importing code snippets",id:"importing-code-snippets",level:2},{value:"Importing Markdown",id:"importing-markdown",level:2},{value:"Available exports",id:"available-exports",level:2}];function g(e){let t={a:"a",admonition:"admonition",b:"b",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"mdx-and-react",children:"MDX and React"})}),"\n","\n",(0,r.jsxs)(t.p,{children:["Docusaurus has built-in support for ",(0,r.jsx)(t.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,r.jsxs)(t.p,{children:["Check out the ",(0,r.jsx)(t.a,{href:"https://mdxjs.com/",children:"MDX docs"})," to see what fancy stuff you can do with MDX."]}),"\n",(0,r.jsxs)(t.admonition,{title:"Debugging MDX",type:"tip",children:[(0,r.jsx)(t.p,{children:"The MDX format is quite strict, and you may get compilation errors."}),(0,r.jsxs)(t.p,{children:["Use the ",(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"https://mdxjs.com/playground/",children:"MDX playground"})})," to debug them and make sure your syntax is valid."]})]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["Prettier, the most popular formatter, ",(0,r.jsx)(t.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,r.jsx)(t.code,{children:"{/* prettier-ignore */}"})," before the problematic area, or add ",(0,r.jsx)(t.code,{children:"*.mdx"})," to your ",(0,r.jsx)(t.code,{children:".prettierignore"}),", until Prettier has proper support for MDX v3. ",(0,r.jsxs)(t.a,{href:"https://github.com/orgs/mdx-js/discussions/2067",children:["One of the main authors of MDX recommends ",(0,r.jsx)(t.code,{children:"remark-cli"})," with ",(0,r.jsx)(t.code,{children:"remark-mdx"})]}),"."]})}),"\n",(0,r.jsx)(t.h3,{id:"exporting-components",children:"Exporting components"}),"\n",(0,r.jsxs)(t.p,{children:["To define any custom component within an MDX file, you have to export it: only paragraphs that start with ",(0,r.jsx)(t.code,{children:"export"})," will be parsed as components instead of prose."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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,r.jsx)(t.p,{children:"Notice how it renders both the markup from your React component and the Markdown syntax:"}),"\n","\n",(0,r.jsxs)(i.Z,{minHeight:240,children:[(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{color:"#25c2a0",children:"Docusaurus green"}),"\n"," ","and ",(0,r.jsx)(b,{color:"#1877F2",children:"Facebook blue"})," are my favorite colors."]}),(0,r.jsxs)(t.p,{children:["I can write ",(0,r.jsx)(t.strong,{children:"Markdown"})," alongside my ",(0,r.jsx)(t.em,{children:"JSX"}),"!"]})]}),"\n",(0,r.jsxs)(t.admonition,{title:"MDX is JSX",type:"warning",children:[(0,r.jsx)(t.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,r.jsx)(t.pre,{children:(0,r.jsx)(t.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,r.jsx)(t.h3,{id:"importing-components",children:"Importing components"}),"\n",(0,r.jsx)(t.p,{children:"You can also import your own components defined in other files or third-party components installed via npm."}),"\n","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-md",children:"<!-- Docusaurus theme component -->\nimport TOCInline from '@theme/TOCInline';\n<!-- External component -->\nimport Button from '@mui/material/Button';\n<!-- Custom component -->\nimport BrowserWindow from '@site/src/components/BrowserWindow';\n"})}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"@site"})," alias points to your website's directory, usually where the ",(0,r.jsx)(t.code,{children:"docusaurus.config.js"})," file is. Using an alias instead of relative paths (",(0,r.jsx)(t.code,{children:"'../../src/components/BrowserWindow'"}),") saves you from updating import paths when moving files around, or when ",(0,r.jsx)(t.a,{href:"/docs/versioning",children:"versioning docs"})," and ",(0,r.jsx)(t.a,{href:"/docs/i18n/tutorial",children:"translating"}),"."]})}),"\n",(0,r.jsxs)(t.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,r.jsx)(t.code,{children:".js"})," file when your component involves complex JS logic:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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,r.jsx)(t.pre,{children:(0,r.jsx)(t.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,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.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,r.jsx)(t.a,{href:"#mdx-component-scope",children:"See below"})]})}),"\n",(0,r.jsx)(t.h3,{id:"mdx-component-scope",children:"MDX component scope"}),"\n",(0,r.jsxs)(t.p,{children:["Apart from ",(0,r.jsx)(t.a,{href:"#importing-components",children:"importing a component"})," and ",(0,r.jsx)(t.a,{href:"#exporting-components",children:"exporting a component"}),", a third way to use a component in MDX is to ",(0,r.jsx)(t.strong,{children:"register it to the global scope"}),", which will make it automatically available in every MDX file, without any import statements."]}),"\n",(0,r.jsx)(t.p,{children:"For example, given this MDX file:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-md",children:"- a\n- list!\n\nAnd some <Highlight>custom markup</Highlight>...\n"})}),"\n",(0,r.jsxs)(t.p,{children:["It will be compiled to a React component containing ",(0,r.jsx)(t.code,{children:"ul"}),", ",(0,r.jsx)(t.code,{children:"li"}),", ",(0,r.jsx)(t.code,{children:"p"}),", and ",(0,r.jsx)(t.code,{children:"Highlight"})," elements. ",(0,r.jsx)(t.code,{children:"Highlight"})," is not a native html element: you need to provide your own React component implementation for it."]}),"\n",(0,r.jsxs)(t.p,{children:["In Docusaurus, the MDX component scope is provided by the ",(0,r.jsx)(t.code,{children:"@theme/MDXComponents"})," file. It's not a React component, ",(0,r.jsx)(t.em,{children:"per se"}),", unlike most other exports under the ",(0,r.jsx)(t.code,{children:"@theme/"})," alias: it is a record from tag names like ",(0,r.jsx)(t.code,{children:"Highlight"})," to their React component implementations."]}),"\n",(0,r.jsxs)(t.p,{children:["If you ",(0,r.jsx)(t.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,r.jsx)(t.code,{children:"@theme/MDXComponents/Code"})," (which is used to render ",(0,r.jsx)(t.a,{href:"/docs/markdown-features/code-blocks",children:"Markdown code blocks"}),")."]}),"\n",(0,r.jsxs)(t.p,{children:["If you want to register extra tag names (like the ",(0,r.jsx)(t.code,{children:"<Highlight>"})," tag above), you should consider ",(0,r.jsxs)(t.a,{href:"/docs/swizzling#wrapping",children:["wrapping ",(0,r.jsx)(t.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,r.jsx)(t.pre,{children:(0,r.jsx)(t.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,r.jsxs)(t.p,{children:["And now, you can freely use ",(0,r.jsx)(t.code,{children:"<Highlight>"})," in every page, without writing the import statement:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-md",children:'I can conveniently use <Highlight color="#25c2a0">Docusaurus green</Highlight> everywhere!\n'})}),"\n",(0,r.jsx)(i.Z,{children:(0,r.jsxs)(t.p,{children:["I can conveniently use ",(0,r.jsx)(b,{color:"#25c2a0",children:"Docusaurus green"})," everywhere!"]})}),"\n",(0,r.jsxs)(t.admonition,{type:"warning",children:[(0,r.jsxs)(t.p,{children:["We use ",(0,r.jsx)(t.strong,{children:"upper-case"})," tag names like ",(0,r.jsx)(t.code,{children:"Highlight"})," on purpose."]}),(0,r.jsx)(t.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,r.jsxs)(t.admonition,{type:"warning",children:[(0,r.jsxs)(t.p,{children:["This feature is powered by ",(0,r.jsxs)(t.a,{href:"https://mdxjs.com/docs/using-mdx/#mdx-provider",children:["an ",(0,r.jsx)(t.code,{children:"MDXProvider"})]}),". If you are importing Markdown in a React page, you have to supply this provider yourself through the ",(0,r.jsx)(t.code,{children:"MDXContent"})," theme component."]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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,r.jsxs)(t.p,{children:["If you don't wrap your imported MDX with ",(0,r.jsx)(t.code,{children:"MDXContent"}),", the global scope will not be available."]})]}),"\n",(0,r.jsx)(t.h3,{id:"markdown-and-jsx-interoperability",children:"Markdown and JSX interoperability"}),"\n",(0,r.jsxs)(t.p,{children:["Docusaurus v3 is using ",(0,r.jsx)(t.a,{href:"https://mdxjs.com/blog/v3/",children:"MDX v3"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.a,{href:"https://mdxjs.com/docs/what-is-mdx/#mdx-syntax",children:"MDX syntax"})," is mostly compatible with ",(0,r.jsx)(t.a,{href:"https://commonmark.org/",children:"CommonMark"}),", but is much stricter because your ",(0,r.jsx)(t.code,{children:".mdx"})," files can use JSX and are compiled into real React components (check the ",(0,r.jsx)(t.a,{href:"https://mdxjs.com/playground/",children:"playground"}),")."]}),"\n",(0,r.jsxs)(t.p,{children:["Some valid CommonMark features won't work with MDX (",(0,r.jsx)(t.a,{href:"https://mdxjs.com/docs/what-is-mdx/#markdown",children:"more info"}),"), notably:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Indented code blocks: use triple backticks instead"}),"\n",(0,r.jsxs)(t.li,{children:["Autolinks (",(0,r.jsx)(t.code,{children:"<http://localhost:3000>"}),"): use regular link syntax instead (",(0,r.jsx)(t.code,{children:"[http://localhost:3000](http://localhost:3000)"}),")"]}),"\n",(0,r.jsxs)(t.li,{children:["HTML syntax (",(0,r.jsx)(t.code,{children:'<p style="color: red;">'}),"): use JSX instead (",(0,r.jsx)(t.code,{children:"<p style={{color: 'red'}}>"}),")"]}),"\n",(0,r.jsxs)(t.li,{children:["Unescaped ",(0,r.jsx)(t.code,{children:"{"})," and ",(0,r.jsx)(t.code,{children:"<"}),": escape them with ",(0,r.jsx)(t.code,{children:"\\"})," instead (",(0,r.jsx)(t.code,{children:"\\{"})," and ",(0,r.jsx)(t.code,{children:"\\<"}),")"]}),"\n"]}),"\n",(0,r.jsxs)(t.admonition,{title:"Experimental CommonMark support",type:"danger",children:[(0,r.jsxs)(t.p,{children:["Docusaurus v3 makes it possible to opt-in for a less strict, standard ",(0,r.jsx)(t.a,{href:"https://commonmark.org/",children:"CommonMark"})," support with the following options:"]}),(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["The ",(0,r.jsx)(t.code,{children:"format: md"})," front matter"]}),"\n",(0,r.jsxs)(t.li,{children:["The ",(0,r.jsx)(t.code,{children:".md"})," file extension combined with the ",(0,r.jsx)(t.code,{children:'siteConfig.markdown.format: "detect"'})," configuration"]}),"\n"]}),(0,r.jsxs)(t.p,{children:["This feature is ",(0,r.jsx)(t.strong,{children:"experimental"})," and currently has a few ",(0,r.jsx)(t.a,{href:"https://github.com/facebook/docusaurus/issues/9092",children:"limitations"}),"."]})]}),"\n",(0,r.jsx)(t.h2,{id:"importing-code-snippets",children:"Importing code snippets"}),"\n",(0,r.jsxs)(t.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,r.jsx)(t.a,{href:"https://webpack.js.org/loaders/raw-loader/",children:"Webpack raw-loader"}),". In order to use ",(0,r.jsx)(t.code,{children:"raw-loader"}),", you first need to install it in your project:"]}),"\n",(0,r.jsxs)(s.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(c.Z,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install --save raw-loader\n"})})}),(0,r.jsx)(c.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add raw-loader\n"})})}),(0,r.jsx)(c.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add raw-loader\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"Now you can import code snippets from another file as it is:"}),"\n","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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,r.jsx)(i.Z,{children:(0,r.jsx)(a.Z,{language:"jsx",children:l.Z})}),"\n",(0,r.jsxs)(t.p,{children:["See ",(0,r.jsx)(t.a,{href:"/docs/markdown-features/code-blocks#usage-in-jsx",children:"using code blocks in JSX"})," for more details of the ",(0,r.jsx)(t.code,{children:"<CodeBlock>"})," component."]}),"\n",(0,r.jsx)(t.admonition,{type:"note",children:(0,r.jsxs)(t.p,{children:["You have to use ",(0,r.jsx)(t.code,{children:"<CodeBlock>"})," rather than the Markdown triple-backtick ",(0,r.jsx)(t.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,r.jsx)(t.admonition,{type:"warning",children:(0,r.jsx)(t.p,{children:"This feature is experimental and might be subject to breaking API changes in the future."})}),"\n",(0,r.jsx)(t.h2,{id:"importing-markdown",children:"Importing Markdown"}),"\n",(0,r.jsx)(t.p,{children:"You can use Markdown files as components and import them elsewhere, either in Markdown files or in React pages."}),"\n",(0,r.jsxs)(t.p,{children:["By convention, using the ",(0,r.jsxs)(t.strong,{children:[(0,r.jsx)(t.code,{children:"_"})," filename prefix"]})," will not create any doc page and means the Markdown file is a ",(0,r.jsx)(t.strong,{children:'"partial"'}),", to be imported by other files."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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,r.jsx)(t.pre,{children:(0,r.jsx)(t.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,r.jsx)(i.Z,{children:(0,r.jsx)(u,{name:"Sebastien"})}),"\n",(0,r.jsx)(t.p,{children:"This way, you can reuse content among multiple pages and avoid duplicating materials."}),"\n",(0,r.jsx)(t.h2,{id:"available-exports",children:"Available exports"}),"\n",(0,r.jsx)(t.p,{children:"Within the MDX page, the following variables are available as globals:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"frontMatter"}),": the front matter as a record of string keys and values;"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"toc"}),": the table of contents, as a tree of headings. See also ",(0,r.jsx)(t.a,{href:"/docs/markdown-features/toc#inline-table-of-contents",children:"Inline TOC"})," for a more concrete use-case."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"contentTitle"}),": the Markdown title, which is the first ",(0,r.jsx)(t.code,{children:"h1"})," heading in the Markdown text. It's ",(0,r.jsx)(t.code,{children:"undefined"})," if there isn't one (e.g. title specified in the front matter)."]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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,r.jsxs)(i.Z,{children:[(0,r.jsx)(t.p,{children:"The table of contents for this page, serialized:"}),(0,r.jsx)(a.Z,{className:"language-json",children:JSON.stringify(j,null,2)}),(0,r.jsx)(t.p,{children:"The front matter of this page:"}),(0,r.jsx)("ul",{children:Object.entries(p).map(([e,n])=>(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.b,{children:e}),": ",n]},e))}),(0,r.jsxs)("p",{children:["The title of this page is: ",(0,r.jsx)("b",{children:h})]})]})]})}function y(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}}}]);
Reference in a new issue View git blame Copy permalink