"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["11773"],{63199:function(e,n,r){r.d(n,{Z:function(){return s}});let s="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAT3UlEQVR42u1dCVQVV5pWXNt2N0czykl33KImZ7IgKgqIghq3KCDK+qowCek2c2K0Mx3idBxakzYxJnZiq3Gf6Bg7UdN2R51MxnTSia3gew9Rwccm7oqiiIK4sPxTt1hEHo9XvPVW1fed852Dr+67UNb/1f3/+9/731atAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO8i2CxGjDUJXzMGmcSZnmoHAF7B6GMJvYPNwq5gk1AmMS/YJMbaahtkNsRLbeghmoU4d7cDAO+NCEbhQCMjrZbe5q81bhdyVOwuXbtqZdDSZ+yau9oBgNcgGeIvmzDQJkUy1ix8ZKMtsWvuagcAXsNYs/iyLSNlIgk2GebLQjKJQ6R/32+mbcWYI8KTrm6HJwR4170yCV80Y6T1I4kklH122lFNG9e2wxMC3Ao/U1KnQLPgF2SK/xeri5TiIxlikX1DBXVANpoXSy/DzGCjYfdYs2FRiFkcxWxEu/GF0RAm3fT1Bv8JJyV+LLlV08ccnNuFCQeGAdrheWkkXxaSGueruZFDurlrzfn4QSbDGRgAqJD3JK4NMcU8oo3RIz1hOB4q6AZeCzKK0aoXCIs58DBBt9Esfip5Ke3UPkN1Eg8TdB8N+5grr+JRxPAJHiLoTgaZhf97MiuqvVqTgNPxEEEPcK0qBTIyNa6rnWw1CLooJjHMUZc6KMWnNs9xDg8Q9ACLQtMMvbhfeFi7tuoLZMhBz1NczaUw2H4OFizhAYFe5l0uM+61m53wgMAWM+C7aBr425Ey2c8umPpdxmO+oxQPWz8cvnOmTGf7Gf1DDHXs25lYxMrIfmafOdnvOe4WONZsk4XhaD7nkJpAPQN96w2a/cw+c7S/QYsC6vuq46D/CHD+7zQaRvDmYsXVbG6CEWmZQ5YGWRk0+8zR/phb1bg/9pkLgvVk/twso+EViETbfPw1PyuDHrDQ36n4o6GL1eHRn7skDhlrEnZyuvbKMN/TIglKM9AzmyfLbzL2sBjZz89sniJfg2G7Nvbwad+m3qB9OrQh/z0RTschzK1yXZAu8zi/CxQ9NJL4fT6d+kwdQG27drB6q9WxXbcO1GfaAPL78wswcBfx6Y2T6ZHxv5DJfuY1acj5Kl55JHHPtOCBaOozZQC18mltUxhWlNoyobjwDQVyng/hVhyBaYbBrEKhW0aNL2Y85LO2lB37daHhX86AAemAPC4z6R5sEt9j6nWXONr8vJ3D4qhj287tIRIIxMP7PmrKd151p1vV3MjRtmt7eiT0F+QbN4z6xQ6T/eO2XdrbbP8z3y5wtyAQT+VAxAh336wcczQVhPfsKM+ANJWsYp+xRFS7Hh2b/C6LSWBIEIgnsuh73T1b1VRA3ql/dxq5d5bd74/4OlJu21TgjtktCMT9uwbdFJDXjx5TBzQ5cigRR71I/hZJ7bpbTwf3mT4QxgSBuHtbrSHcnUlAlstwxXqdgcmjmsyTIJkIgag2SGcZ8qYCckcWyAUdTpBnsBr398yWKTAoCESd07xD3rFeHMdmqxztj81uNe5v6B+CYVAQiAeD9qPiIOkP/NIVN9l//nArg/ZNeNLh/nzjn7Tqr//rw2FQEIg6M+lN7RcY/LvR3PQHupdh6S9R+LH5ZMh8i17NfoeS81bSO6fX0cfn/ps2X/wL7bzyv/TNtYP0z5KjdLw0hwrKL1DR/Rt0r+q+Plys0d/HyMtDGib4nNlx5ur+QPcZuLPQTSa9bjk0oyuM2dX9adm4Zx57jeIzk+lXliX0Ru4KSjm1hlac/S/69MKXtP3yXvrr1b/Td8WplHbzOGWV5dPZO5fo+v0Slxi4ZgTiiUw66BoD/32BPQO/zI2Ba0cgbs6kg9aMPfFbWn5mM/258H80a+CaEYi7M+ngA7JR4ERpHgFqEogbM+lgDSelv0LfFx+B1SNIBxtzWsarlH27ABavZoF4YsOUHhliEuX4AlCOwsJC2rVrF7+JwjHGuU8Em4X9MHDn+afzOzRtzGVlZbR69WqKjY2lqKgoev/996m4uNihvqqrqyklJYU6dKhf3Kq/Pel6izuKK246bYQXLlygvXv30ldffUWZmZlO9cX6CAwMpI4dO1Lbtm3pueeeo61btzrUV1ZWFj3++ONWKxseffRRMpvNLe7vzTffrClF5ONDEydOhIuldb53ZqNTxpyfn08RERFWBsiM2mQytbi/+fPn29zCnJSU1KK+ioqKyNe3poTpU089RRs3bqTt27dTQEBAvUiuXr2quL8ff/xRFgYT7e7duxGk64E/FBsdFsfhw4epR48eNTsvO3WioKAgmjRpEvXu3Vv+rHPnzvTTTz8p7u/dd9+tqXwouS/Lly+nS5cuUUlJCa1fv17ui11j7pFSTJs2Tf4O+7tu3bpV//ndu3fr3v40Y8YMRX1VVFTQkCFD5O8sW7YMmXS98MLdQofEYbFYqFu3brLBsBGEBa11KC0tpcTERPkaa8NGGXs4ePCg/HZu06YN7du3z+r6/v3769/e6enpdvvbs2dPTeHrnj1l968xLl68SN2712yR/vbbb+3299lnn8ltn3jiCbp37x4y6XphedWdFouDBbiDBw+WDWb27NlUWVlp1aaqqooiIyPlNsOHD3/IqBrj9u3bNGjQILnt4sWLbbZbuHCh3Mbf37/J31kH9rvq+mPBuS2w0Yi18fPzk4NvW2C/iwmDtd22bRsy6RAINWvM48aNq48z2L9tgblH/fv3l9suWLDAZrt58+bJbZ5++ulmhcRGpscee8yu4a9YsUJuM2zYMNk1soXy8nLq16+f3Hbnzp0227EJAtZm4MCBVv0hkw4XS8aNGzdkV4S9bZmxMMM6f/683e+lpaVR+/Y1W5A//PBDq+vr1q2Tr7E2GRkZil2nrl27Um5ubpOTBuwaa/PNN9/Y7a/u97MRgsUmjcE+Y8JgbbZs2YJMut6oZGnJ6NGjHz5bQzKYggLlWXf2BmbxA/suC+LZbNKOHTsoLi6OWrduLXPz5s2K+2P5DNYXC5rz8h6sGbt8+bI8qrFrrI3S4JuNNOw7ycnJVtfffvvtZkcjTPNqnMtOb7BrRGPGjJFnlpiRfPDBB826VbbABNGrVy/rii/t2tGqVata7OY9++yz8ve7dOkiC41NAdfNng0dOlR2x5TCaDTKfwf77tKlS2UhsJiEuXFs0oCJ+9ChQ+pYauKOPel65sT0JJckCpXmJVhgzLLZM2fOpEWLFj00ArR0oqCp/AuLj9hI0lIwkbKRrG7mqy42YVyyZIl61mJhqYnruercdtUuI2HTzZs2baK1a9fSkSPOrURm8U1droOxb9++tGHDBixWxGJFkVJLjmEFYoMcCYuxmpsBQ5Cuu+Xu8+hk2SmoQ63L3ZFJ90w8cuD6YVi9KgWCTLrHuDB3uVwep5qqoQC1CASZdM8z+sQb9P6ZTbSjcD+KNnAvEGTSUfYHAkGQDoGhcBymeUGUHkUmHdS6wG5VlmFPOgjq/gAdEMQRbCCoZYEgkw5CIMikgxAIMukgBIJMOgiBIEgHIRBM84KgegSCTDoIgSCTzvcWXbNAv7bE0/oL0fSPG1F0+k4k3aoMp4rqmUSkL8LFAus563gCbb88h4ruR+hOCKoQCIJ07/CFDAP9rWg23a+GILgVCDLp3uGSghi6WREOMXAvEGTSPcrxUpzxtTRqQAQqEQgCck9WNzFQasksCEBVAkEm3WMjB8SBIB20QbhVmOYFbXBpQazLDYjlR25XhetGIJOyXuw5JntuF2TSNVd61EAlLpytqpa4sjCWJmSLMtdcidG2QKhV67CcxHVh2WJVLVcik65zjmVZ9QyRxmcKFHpSJMkoaGqOSHGnDPTGuXj53w1pLIvSnECk+yoPzRZPh2Un/r3x/YZZEifBxdLrcpOMB6JQyt3Fc7QokOb4OoJ0vdEs0LgTLRNGHQ/cnE07JZEcLo2SXTCtC2RCdmJ8aI64MNSSOI25YMik64COiqMxPy6M0cMI0oDCGmTSdeBWuUIcYbWBe6kGZrdacM/VIafF7sikazggb2nMYU8gJZURehJIVUhO0iPIpGt29HCdOBj/qDMXS3ohfIogXctLUDJd516xaeCvb8yhMv24WGekQP2VsFNJ3TDNq1G60r2qY4IkFLWLpIX3fMojIkEm3QsV0LMFlwuEcfS/P0N+ft29ypdf/qWnBEJhFiEJmXQIRDH7RQ2uP5fcW+zbt6PHBDIhJ/EluFhwsRRxzsl4OmgeTyZTiFdZXDzVUwLJd6uLhSBdO0H63huzdRWkM9fKreJAJl07SULGjy7H6iuTbhHXI5Ou8URhGBKFHCcKEZB7fxQ5iqUm/C41QSadk8WKrhHJJ4X6crFCLeKfkEnXiavl7HL31LJZutgPUrfcPSxXmIoNU3rcMGURsGGKpw1TyKTzKZTxmWJtnkT6OSOBxhyYRX6fPW9lML0C+3k9KdgUR47s4dSWW4kF3Gy5RSbdtXTUMEaM6NG84bVuRUNSAiThSCNNlkCDk/25FAfjqFE9XVO0IVtcW1uwoTLMInyEsj86FohSllaGU7mOyv5MPR7bIyRrXmcUjoNAQFR3h0BAVHeHQEBUdwchEFR3ByEQVHdHkA6BQCCY5oVAIBBk0tUrEH//Htwm/jyZSedWIMikc55JVxFdkkmHiwWBgAjSIRAQmXQQAkEmHYRAkEkHeRDIP0ujaOG5eJqWK8j8jfQzOyQHAkEmXfcC2XA12uaOuk1F0RAIgnRtC4Qd4XyifBZZ7kRaHefMRg5722wbjySsD9YX61MLx0OH5cwNnJwX1xXTvDoTyF3JeD8pjKHncx4Y+xTp51VXYuRrrM3CJk6ybUx22u2D/mLlPuquTc4RavqrVv2e9LthOcKqgPNRP0MmXQcCqZAMdsFZ28b/unTNf1QvGpceZ1cg48xx5NPOh4Z/PsVmG79tz1Prtj5q3ZPekD/4mZLaIZOu9dpXx+1XKBl3XFlFk9BMAw1+a4Tddo8Zhqkyk95EQbz5cLG0Xsk9S3TLUQfN8ddnErRS9seMIF3rZ4FYPC+QF3IFrQjkFjLpOAvE5UwsMGhFIBZk0rV+FsgJweMC+Vilp95a34uwBpl0rdffNXtWIKzS+9Hbs2hlYSwZThnkqWA2onx+LZr7KeDGFdxDsw3jwnIS18mnSWWLd9iIEmpJfMvtU8DIpHtwBMny/Ahii/8mBe88JxRb8BJIc3tCEUG6Nt0re/zgcozqBVLrfm3GNK+aC1Ef408cjBM5Po2qhfdS6dZTppBJd2/cEWoRuRQIY8/RfdWQSbfP3LlhSoPuxSGpcb7IpMO1UsIe/n1UkUm3OxrmCsF2jTs09aU+0kO5zQwcLhYHTBe5Fgdb1HirMlwLLtbdSVkv9lSS01ha93CCzMpP4UGQzve5g+7iHzk+z7CF97JWadIvr8EDqmJZcmTSvUSzd5aWKOX8swn1y+tVLpCD001JnezHHkdE/yYe1B17IkEm3U3BeTq/o8faK9Hy0nvVn3JrET5SvAxeeii/sfGwqqSY5DVk0j3sXh3jd/Rgm7V43+Ou8F7uSyyT+P1EizjdnkC+sDPk7x+TPrcvMukemr3K5DtA532PuyP3EZojvtvc9G6mggd3LcgoLAg49PD6FQTp7li5K6hGIE3tcVejQGSRWBKn2RpBLrXgAbK2vws0zu2PaV7t7P1whnV73NUuEHZstC2B3HFwtuVIkEn8cKxRiJFGkn8NyZgbGGw07IaROzmCZKtLIGyPu6oz6fY2VkkP5R4MEwJxlCGmOG4y6ferw525l5u2BHIdhsmRQOBiOUy2gNLhGCRb/M6ZIB3U8PZaZ5haNosbgRTcjXT8XnKFqbZGkK9gmDxtjlKPOLZwNs37j1uzHbwXYWlzOwMXwTCRKFSaKJyeK8huFU8jh5K6xNaJQqGUuVU2R476aVqzOAqGiaUmSnjmXiTXy0xePZOgLN7ISxymfL06pfhID+YcjJMTgXAah7xymu9CclfuR8jFJhTcy1EHSvgYlsE41VVq1NPccX0O1wJhFVcU3UuOmNzyfeWpcb7Ih/C1YYqnfAirsnijkt8l7iz/EZ1vUJQMnJif0NvRQnBrYZw8bZriRyDbrvE9euwpnqOs1E+OsNjhogsBh17sKT2YIhgnLxunRC7WZc3OF6ic4w1SN6WRLTJP0ehxOSRrXmfn6lwZxWgYJ8r+NKywmMbhdG5DLrkYp+ReqsbnGCa7qij1pzBOVDdh3HqN7zMN/3pjttLA/D9dVt8q6suoNmNNwl9gnPreRPV76c1czbE4WKJyUo6il8euFErxcWkROD9TUqdgk2EfjJOf3IgnRfLepViqrOY37mCbtKbmKhLH1pDvU9q6pVIi29SOmS19zWxNqC3MUM25W6Vg5KhmhRlaUavWHjgoxzAHs1scBe4ZclUOl4sjJt9AxrIoboVRUhmuNCA/F2ZJnOTRs0BC0wy9gk3iamyr5ad2lquCd1alZM2VGG6PNGBJQJbnCM+ze7+sSslKr56RPj7D0K92WQrWbnEiFLYsxZG1W2zEYMszeC0herUiQv77FGTIz7EDcRSVEPUYKMUnyGgYIY0qyVIAuVN6WMdrdyZiuYqXgvixRwX5KOjxmTWLHdnORLZchfnrEdLb9+XTCZKLEiv78GfvRXA0QsykmxXhlF8eST8UR9G6i9H0q7x4Cm10H2HZQoUkhmsSj0/IFnZOyBFeDctNGNoKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsI3/BxVeQNnL1kBuAAAAAElFTkSuQmCC"},38874:function(e,n,r){r.r(n),r.d(n,{metadata:()=>s,contentTitle:()=>d,default:()=>h,assets:()=>l,toc:()=>c,frontMatter:()=>i});var s=JSON.parse('{"id":"guides/markdown-features/introduction","title":"Markdown Features","description":"Docusaurus uses MDX. Find out more about Docusaurus-specific features when writing Markdown.","source":"@site/docs/guides/markdown-features/markdown-features-intro.mdx","sourceDirName":"guides/markdown-features","slug":"/markdown-features","permalink":"/docs/markdown-features","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-intro.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1728655362000,"frontMatter":{"id":"introduction","description":"Docusaurus uses MDX. Find out more about Docusaurus-specific features when writing Markdown.","slug":"/markdown-features"},"sidebar":"docs","previous":{"title":"Blog","permalink":"/docs/blog"},"next":{"title":"MDX and React","permalink":"/docs/markdown-features/react"}}'),t=r("24246"),o=r("80980"),a=r("14522");let i={id:"introduction",description:"Docusaurus uses MDX. Find out more about Docusaurus-specific features when writing Markdown.",slug:"/markdown-features"},d="Markdown Features",l={},c=[{value:"MDX vs. CommonMark",id:"mdx-vs-commonmark",level:2},{value:"Standard features",id:"standard-features",level:2},{value:"Front matter",id:"front-matter",level:2},{value:"Quotes",id:"quotes",level:2},{value:"Details",id:"details",level:2}];function u(e){let n={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components},{Details:s}=n;return!s&&function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"markdown-features",children:"Markdown Features"})}),"\n","\n",(0,t.jsxs)(n.p,{children:["Docusaurus uses ",(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.a,{href:"https://commonmark.org/",children:"Markdown"})})," as its main content authoring format."]}),"\n",(0,t.jsx)(n.admonition,{title:"Learn Markdown",type:"tip",children:(0,t.jsxs)(n.p,{children:["You can ",(0,t.jsx)(n.a,{href:"https://commonmark.org/help/",children:"learn Markdown in 10 minutes"}),"."]})}),"\n",(0,t.jsxs)(n.p,{children:["Docusaurus uses modern tooling to help you create ",(0,t.jsx)(n.strong,{children:"interactive documentation"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.a,{href:"https://mdxjs.com/",children:"MDX"})})," compiler transforms ",(0,t.jsx)(n.strong,{children:"Markdown files to React components"}),", and allows you to use JSX in your Markdown content. This enables you to easily interleave React components within your content, and create delightful learning experiences."]}),"\n",(0,t.jsxs)(n.admonition,{title:"Use the MDX Playground",type:"tip",children:[(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.a,{href:"https://mdxjs.com/playground/",children:"MDX playground"})})," is your new best friend!"]}),(0,t.jsx)(n.p,{children:"It is a very helpful debugging tool that shows how the MDX compiler transforms Markdown to React."}),(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Options"}),": select the right format (MDX or CommonMark) and the following plugins Docusaurus uses: ",(0,t.jsx)(n.code,{children:"remark-gfm"}),", ",(0,t.jsx)(n.code,{children:"remark-directive"}),", ",(0,t.jsx)(n.code,{children:"rehype-raw"}),"."]})]}),"\n",(0,t.jsx)(n.h2,{id:"mdx-vs-commonmark",children:"MDX vs. CommonMark"}),"\n",(0,t.jsxs)(n.p,{children:["Docusaurus compiles both ",(0,t.jsx)(n.code,{children:".md"})," and ",(0,t.jsx)(n.code,{children:".mdx"})," files to React components using the MDX compiler, but ",(0,t.jsx)(n.strong,{children:"the syntax can be interpreted differently"})," depending on your settings."]}),"\n",(0,t.jsxs)(n.p,{children:["The MDX compiler supports ",(0,t.jsx)(n.a,{href:"https://mdxjs.com/packages/mdx/#optionsformat",children:"2 formats"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["The ",(0,t.jsx)(n.a,{href:"https://mdxjs.com/docs/what-is-mdx/",children:"MDX format"}),": a powerful parser allowing the usage of JSX"]}),"\n",(0,t.jsxs)(n.li,{children:["The ",(0,t.jsx)(n.a,{href:"https://commonmark.org/",children:"CommonMark format"}),": a standard-compliant Markdown parser that does not allow the usage of JSX"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["By default, ",(0,t.jsx)(n.strong,{children:"Docusaurus v3 uses the MDX format for all files"})," (including ",(0,t.jsx)(n.code,{children:".md"})," files) for historical reasons."]}),"\n",(0,t.jsxs)(n.p,{children:["It is possible to ",(0,t.jsx)(n.strong,{children:"opt-in for CommonMark"})," using the ",(0,t.jsx)(n.a,{href:"/docs/api/docusaurus-config#markdown",children:(0,t.jsx)(n.code,{children:"siteConfig.markdown.format"})})," setting or the ",(0,t.jsx)(n.code,{children:"format: md"})," front matter."]}),"\n",(0,t.jsxs)(n.admonition,{title:"how to use CommonMark",type:"tip",children:[(0,t.jsxs)(n.p,{children:["If you plan to use CommonMark, we recommend the ",(0,t.jsx)(n.a,{href:"/docs/api/docusaurus-config#markdown",children:(0,t.jsx)(n.code,{children:"siteConfig.markdown.format: 'detect'"})})," setting. The appropriate format will be selected automatically, based on file extensions:"]}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:".md"})," files will use the CommonMark format"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:".mdx"})," files will use the MDX format"]}),"\n"]})]}),"\n",(0,t.jsx)(n.admonition,{title:"Experimental CommonMark support",type:"danger",children:(0,t.jsxs)(n.p,{children:["The CommonMark support is ",(0,t.jsx)(n.strong,{children:"experimental"})," and currently has a few ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/9092",children:"limitations"}),"."]})}),"\n",(0,t.jsx)(n.h2,{id:"standard-features",children:"Standard features"}),"\n",(0,t.jsx)(n.p,{children:"Markdown is a syntax that enables you to write formatted content in a readable syntax."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-md",children:"### My Doc Section\n\nHello world message with some **bold** text, some _italic_ text, and a [link](/)\n\n![img alt](/img/docusaurus.png)\n"})}),"\n",(0,t.jsxs)(a.Z,{children:[(0,t.jsx)("h3",{children:"My Doc Section"}),(0,t.jsxs)(n.p,{children:["Hello world message with some ",(0,t.jsx)(n.strong,{children:"bold"})," text, some ",(0,t.jsx)(n.em,{children:"italic"})," text and a ",(0,t.jsx)(n.a,{href:"/",children:"link"})]}),(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"img alt",src:r(63199).Z+"",width:"200",height:"200"})})]}),"\n",(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"Markdown is declarative"}),(0,t.jsxs)(n.p,{children:["Some may assume a 1-1 correlation between Markdown and HTML, e.g., ",(0,t.jsx)(n.code,{children:"![Preview](/img/docusaurus.png)"})," will always become ",(0,t.jsx)(n.code,{children:'<img src="/img/docusaurus.png" alt="Preview" />'}),", as-is. However, ",(0,t.jsx)(n.em,{children:"that is not the case"}),"."]}),(0,t.jsxs)(n.p,{children:["The Markdown syntax ",(0,t.jsx)(n.code,{children:"![message](url)"})," only declaratively tells Docusaurus that an image needs to be inserted here, but we may do other things like transforming a ",(0,t.jsx)(n.a,{href:"/docs/markdown-features/assets#images",children:"file path to URL path"}),", so the generated markup may differ from the output of other Markdown renderers, or a na\xefve hand-transcription to the equivalent JSX/HTML code."]}),(0,t.jsxs)(n.p,{children:["In general, you should only assume the ",(0,t.jsx)(n.em,{children:"semantics"})," of the markup (",(0,t.jsx)(n.code,{children:"```"})," fences become ",(0,t.jsx)(n.a,{href:"/docs/markdown-features/code-blocks",children:"code blocks"}),"; ",(0,t.jsx)(n.code,{children:">"})," becomes ",(0,t.jsx)(n.a,{href:"#quotes",children:"quotes"}),", etc.), but not the actual compiled output."]})]}),"\n",(0,t.jsx)(n.h2,{id:"front-matter",children:"Front matter"}),"\n",(0,t.jsx)(n.p,{children:"Front matter is used to add metadata to your Markdown file. All content plugins have their own front matter schema, and use the front matter to enrich the default metadata inferred from the content or other configuration."}),"\n",(0,t.jsxs)(n.p,{children:["Front matter is provided at the very top of the file, enclosed by three dashes ",(0,t.jsx)(n.code,{children:"---"}),". The content is parsed as ",(0,t.jsx)(n.a,{href:"https://yaml.org/spec/1.2.2/",children:"YAML"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-md",children:"---\ntitle: My Doc Title\nmore_data:\n  - Can be provided\n  - as: objects\n    or: arrays\n---\n"})}),"\n",(0,t.jsxs)(n.admonition,{type:"info",children:[(0,t.jsx)(n.p,{children:"The API documentation of each official plugin lists the supported attributes:"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-content-docs#markdown-front-matter",children:"Docs front matter"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-content-blog#markdown-front-matter",children:"Blog front matter"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/api/plugins/@docusaurus/plugin-content-pages#markdown-front-matter",children:"Pages front matter"})}),"\n"]})]}),"\n",(0,t.jsxs)(n.admonition,{title:"enhance your front matter",type:"tip",children:[(0,t.jsxs)(n.p,{children:["Use the ",(0,t.jsxs)(n.a,{href:"/docs/api/docusaurus-config#markdown",children:["Markdown config ",(0,t.jsx)(n.code,{children:"parseFrontMatter"})," function"]})," to provide your own front matter parser, or to enhance the default parser."]}),(0,t.jsx)(n.p,{children:"It is possible to reuse the default parser to wrap it with your own custom proprietary logic. This makes it possible to implement convenient front matter transformations, shortcuts, or to integrate with external systems using front matter that Docusaurus plugins do not support."}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n  markdown: {\n    // highlight-start\n    parseFrontMatter: async (params) => {\n      // Reuse the default parser\n      const result = await params.defaultParseFrontMatter(params);\n\n      // Process front matter description placeholders\n      result.frontMatter.description =\n        result.frontMatter.description?.replaceAll('{{MY_VAR}}', 'MY_VALUE');\n\n      // Create your own front matter shortcut\n      if (result.frontMatter.i_do_not_want_docs_pagination) {\n        result.frontMatter.pagination_prev = null;\n        result.frontMatter.pagination_next = null;\n      }\n\n      // Rename an unsupported front matter coming from another system\n      if (result.frontMatter.cms_seo_summary) {\n        result.frontMatter.description = result.frontMatter.cms_seo_summary;\n        delete result.frontMatter.cms_seo_summary;\n      }\n\n      return result;\n    },\n    // highlight-end\n  },\n};\n"})})]}),"\n",(0,t.jsx)(n.h2,{id:"quotes",children:"Quotes"}),"\n",(0,t.jsx)(n.p,{children:"Markdown quotes are beautifully styled:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-md",children:"> Easy to maintain open source documentation websites.\n>\n> \u2014 Docusaurus\n"})}),"\n",(0,t.jsx)(a.Z,{children:(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsx)(n.p,{children:"Easy to maintain open source documentation websites."}),"\n",(0,t.jsx)(n.p,{children:"\u2014 Docusaurus"}),"\n"]})}),"\n",(0,t.jsx)(n.h2,{id:"details",children:"Details"}),"\n",(0,t.jsxs)(n.p,{children:["Markdown can embed HTML elements, and ",(0,t.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details",children:(0,t.jsx)(n.code,{children:"details"})})," HTML elements are beautifully styled:"]}),"\n","\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-md",children:'### Details element example\n\n<details>\n  <summary>Toggle me!</summary>\n\n  This is the detailed content\n\n  ```js\n  console.log("Markdown features including the code block are available");\n  ```\n\n  You can use Markdown here including **bold** and _italic_ text, and [inline link](https://docusaurus.io)\n  <details>\n    <summary>Nested toggle! Some surprise inside...</summary>\n\n    \uD83D\uDE32\uD83D\uDE32\uD83D\uDE32\uD83D\uDE32\uD83D\uDE32\n  </details>\n</details>\n'})}),"\n",(0,t.jsxs)(a.Z,{children:[(0,t.jsx)("h3",{children:"Details element example"}),(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"Toggle me!"}),(0,t.jsx)(n.p,{children:"This is the detailed content"}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:'console.log("Markdown features including the code block are available");\n'})}),(0,t.jsxs)(n.p,{children:["You can use Markdown here including ",(0,t.jsx)(n.strong,{children:"bold"})," and ",(0,t.jsx)(n.em,{children:"italic"})," text, and ",(0,t.jsx)(n.a,{href:"https://docusaurus.io",children:"inline link"})]}),(0,t.jsxs)(s,{children:[(0,t.jsx)("summary",{children:"Nested toggle! Some surprise inside..."}),(0,t.jsx)(n.p,{children:"\uD83D\uDE32\uD83D\uDE32\uD83D\uDE32\uD83D\uDE32\uD83D\uDE32"})]})]})]}),"\n",(0,t.jsx)(n.admonition,{type:"info",children:(0,t.jsxs)(n.p,{children:["You may want to keep your ",(0,t.jsx)(n.code,{children:"<summary>"})," on a single line. Keep in mind that ",(0,t.jsxs)(n.a,{href:"https://mdxjs.com/migrating/v2/#jsx",children:["MDX creates extra HTML ",(0,t.jsx)(n.code,{children:"<p>"})," paragraphs for line breaks."]}),". When in doubt, use the ",(0,t.jsx)(n.a,{href:"https://mdxjs.com/playground/",children:"MDX playground"})," to troubleshoot ",(0,t.jsx)(n.code,{children:"<details>"})," rendering problems."]})})]})}function h(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}},14522:function(e,n,r){r.d(n,{Z:()=>m});var s=r("24246");r("27378");var t=r("90496");let o="browserWindow_my1Q",a="browserWindowHeader_jXSR",i="buttons_uHc7",d="browserWindowAddressBar_Pd8y",l="dot_giz1",c="browserWindowMenuIcon_Vhuh",u="bar_rrRL",h="browserWindowBody_Idgs";function m(e){var n,r,m=e.children,p=e.minHeight,f=e.url,x=e.style,g=e.bodyStyle;return(0,s.jsxs)("div",{className:o,style:(n=function(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},s=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),s.forEach(function(n){var s,t,o;s=e,t=n,o=r[n],t in s?Object.defineProperty(s,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):s[t]=o})}return e}({},x),r=(r={minHeight:p},r),Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):(function(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);r.push.apply(r,s)}return r})(Object(r)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}),n),children:[(0,s.jsxs)("div",{className:a,children:[(0,s.jsxs)("div",{className:i,children:[(0,s.jsx)("span",{className:l,style:{background:"#f25f58"}}),(0,s.jsx)("span",{className:l,style:{background:"#fbbe3c"}}),(0,s.jsx)("span",{className:l,style:{background:"#58cb42"}})]}),(0,s.jsx)("div",{className:(0,t.Z)(d,"text--truncate"),children:void 0===f?"http://localhost:3000":f}),(0,s.jsx)("div",{className:c,children:(0,s.jsxs)("div",{children:[(0,s.jsx)("span",{className:u}),(0,s.jsx)("span",{className:u}),(0,s.jsx)("span",{className:u})]})})]}),(0,s.jsx)("div",{className:h,style:g,children:m})]})}},80980:function(e,n,r){r.d(n,{Z:function(){return i},a:function(){return a}});var s=r(27378);let t={},o=s.createContext(t);function a(e){let n=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]);