"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["90349"],{81286:function(e,n,t){t.r(n),t.d(n,{metadata:()=>i,contentTitle:()=>l,default:()=>h,assets:()=>o,toc:()=>d,frontMatter:()=>a});var i=JSON.parse('{"type":"mdx","permalink":"/tests/pages/markdown-tests-md","source":"@site/_dogfooding/_pages tests/markdown-tests-md.md","title":"Markdown Page tests title","description":"Markdown Page tests description","frontMatter":{"title":"Markdown Page tests title","description":"Markdown Page tests description","wrapperClassName":"docusaurus-markdown-example"},"lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1732895410000,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/_dogfooding/_pages tests/markdown-tests-md.md","unlisted":false}'),s=t("24246"),r=t("80980");let a={title:"Markdown Page tests title",description:"Markdown Page tests description",wrapperClassName:"docusaurus-markdown-example"},l="Markdown .md tests",o={},d=[{value:"SEO",id:"seo",level:2},{value:"Comment",id:"comment",level:2},{value:"JSX syntax",id:"jsx-syntax",level:2},{value:"Admonition",id:"admonition",level:2},{value:"Details",id:"details",level:2},{value:"Tab",id:"tab",level:2},{value:"Code block test",id:"code-block-test",level:2},{value:"Mermaid",id:"mermaid",level:2},{value:"Heading Id",id:"custom-heading-id",level:2},{value:"HTML",id:"html",level:2},{value:"Styling",id:"styling",level:3},{value:"Embeds",id:"embeds",level:3},{value:"Closed image tag:",id:"closed-image-tag",level:4},{value:"Unclosed image tag:",id:"unclosed-image-tag",level:4},{value:"Iframe",id:"iframe",level:3},{value:"Security",id:"security",level:3}];function c(e){let n={a:"a",admonition:"admonition",br:"br",browserwindow:"browserwindow",button:"button",code:"code",details:"details",div:"div",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",iframe:"iframe",img:"img",mermaid:"mermaid",meta:"meta",p:"p",pre:"pre",span:"span",summary:"summary",tabitem:"tabitem",tabs:"tabs",title:"title",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"markdown-md-tests",children:"Markdown .md tests"})}),"\n",(0,s.jsx)(n.p,{children:"This file should be interpreted in a more CommonMark compliant way"}),"\n",(0,s.jsx)(n.h2,{id:"seo",children:"SEO"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-md",children:'\n HEAD Markdown Page tests title\n \n\n'})}),"\n\n ",(0,s.jsx)(n.title,{children:"HEAD Markdown Page tests title"}),"\n ",(0,s.jsx)(n.meta,{name:"keywords",content:"cooking, blog"}),"\n\n",(0,s.jsx)(n.admonition,{type:"danger",children:(0,s.jsxs)(n.p,{children:["TODO unsupported (yet), see ",(0,s.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/9092",children:"issue"})]})}),"\n",(0,s.jsx)(n.h2,{id:"comment",children:"Comment"}),"\n",(0,s.jsx)(n.p,{children:"Html comment: "}),"\n",(0,s.jsx)(n.p,{children:"Html comment multi-line:"}),"\n",(0,s.jsx)(n.p,{children:"MDX comment: {/* comment */}"}),"\n",(0,s.jsx)(n.p,{children:"MDX comment multi-line:"}),"\n",(0,s.jsx)(n.p,{children:"{/*\ncomment\n*/}"}),"\n",(0,s.jsx)(n.h2,{id:"jsx-syntax",children:"JSX syntax"}),"\n",(0,s.jsx)(n.p,{children:"import BrowserWindow from '@site/src/components/BrowserWindow';"}),"\n",(0,s.jsxs)(n.browserwindow,{children:["\n",(0,s.jsx)(n.p,{children:"BrowserWindow content"}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"export const answer = 42;"}),"\n",(0,s.jsx)(n.p,{children:"Test {xyz}"}),"\n",(0,s.jsx)(n.h2,{id:"admonition",children:"Admonition"}),"\n",(0,s.jsx)(n.p,{children:"Admonitions still work"}),"\n",(0,s.jsx)(n.admonition,{title:"title",type:"note",children:(0,s.jsx)(n.p,{children:"note"})}),"\n",(0,s.jsx)(n.h2,{id:"details",children:"Details"}),"\n",(0,s.jsxs)(n.details,{children:["\n ",(0,s.jsx)(n.summary,{children:"MD Summary"}),"\n",(0,s.jsx)(n.p,{children:"Our custom Details/Summary also works in CommonMark mode"}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"tab",children:"Tab"}),"\n",(0,s.jsxs)(n.tabs,{children:["\n ",(0,s.jsx)(n.tabitem,{value:"apple",label:"Apple",default:!0,children:"\n This is an apple \uD83C\uDF4E\n "}),"\n ",(0,s.jsx)(n.tabitem,{value:"orange",label:"Orange",children:"\n This is an orange \uD83C\uDF4A\n "}),"\n ",(0,s.jsx)(n.tabitem,{value:"banana",label:"Banana",children:"\n This is a banana \uD83C\uDF4C\n "}),"\n"]}),"\n",(0,s.jsx)(n.admonition,{type:"danger",children:(0,s.jsxs)(n.p,{children:["TODO unsupported (yet), see ",(0,s.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/9092",children:"issue"})]})}),"\n",(0,s.jsx)(n.h2,{id:"code-block-test",children:"Code block test"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="Title"',children:"function Clock(props) {\n const [date, setDate] = useState(new Date());\n useEffect(() => {\n var timerID = setInterval(() => tick(), 1000);\n\n return function cleanup() {\n clearInterval(timerID);\n };\n });\n\n function tick() {\n setDate(new Date());\n }\n\n return (\n
\n

It is {date.toLocaleTimeString()}.

\n // highlight-start\n {/* prettier-ignore */}\n long long long long long long long long long long long long line\n {/* prettier-ignore */}\n // highlight-end\n
\n );\n}\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",metastring:"live",live:"",children:"function Clock(props) {\n const [date, setDate] = useState(new Date());\n useEffect(() => {\n var timerID = setInterval(() => tick(), 1000);\n\n return function cleanup() {\n clearInterval(timerID);\n };\n });\n\n function tick() {\n setDate(new Date());\n }\n\n return (\n
\n

It is {date.toLocaleTimeString()}.

\n
\n );\n}\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"danger",children:(0,s.jsxs)(n.p,{children:["TODO unsupported (yet), see ",(0,s.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/9092",children:"issue"})]})}),"\n",(0,s.jsx)(n.h2,{id:"mermaid",children:"Mermaid"}),"\n",(0,s.jsx)(n.mermaid,{value:"sequenceDiagram\n participant Alice\n participant Bob\n Alice->>John: Hello John, how are you?\n loop Health check\n John->>John: Fight against hypochondria\n end\n Note right of John: Rational thoughts
prevail!\n John--\x3e>Alice: Great!\n John->>Bob: How about you?\n Bob--\x3e>John: Jolly good!"}),"\n",(0,s.jsx)(n.h2,{id:"custom-heading-id",children:"Heading Id"}),"\n",(0,s.jsxs)(n.p,{children:["Custom heading syntax ",(0,s.jsx)(n.code,{children:"{#custom-heading-id}"})," still works"]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h2,{id:"html",children:"HTML"}),"\n",(0,s.jsx)(n.h3,{id:"styling",children:"Styling"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.span,{style:{color:"blue"},children:"blue span"})}),"\n",(0,s.jsx)(n.p,{style:{color:"green"},children:"green p"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.button,{style:{color:"red"},children:"red button"})}),"\n",(0,s.jsxs)(n.div,{style:{border:"solid",backgroundColor:"grey",color:"lime",padding:"10px"},children:["\n lime ",(0,s.jsx)(n.span,{style:{color:"red",margin:"10px"},children:"red"}),"\n"]}),"\n",(0,s.jsx)(n.br,{}),"\n",(0,s.jsx)(n.h3,{id:"embeds",children:"Embeds"}),"\n",(0,s.jsx)(n.h4,{id:"closed-image-tag",children:"Closed image tag:"}),"\n",(0,s.jsx)(n.img,{src:"/img/docusaurus.png"}),"\n",(0,s.jsx)(n.br,{}),"\n",(0,s.jsx)(n.h4,{id:"unclosed-image-tag",children:"Unclosed image tag:"}),"\n",(0,s.jsx)(n.img,{src:"/img/docusaurus.png"}),"\n",(0,s.jsx)(n.br,{}),"\n",(0,s.jsx)(n.h3,{id:"iframe",children:"Iframe"}),"\n",(0,s.jsx)(n.iframe,{src:"/",style:{width:"100%",height:"300px",border:"solid red thick"}}),"\n",(0,s.jsx)(n.br,{}),"\n",(0,s.jsx)(n.h3,{id:"security",children:"Security"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-md",children:"

\n When pressing this button, no alert should be printed\n \n

\n"})}),"\n",(0,s.jsxs)(n.p,{children:["\n When pressing this button, no alert should be printed\n ",(0,s.jsx)(n.button,{onClick:"alert('unsafe');",children:"Click me"}),"\n"]})]})}function h(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},80980:function(e,n,t){t.d(n,{Z:function(){return l},a:function(){return a}});var i=t(27378);let s={},r=i.createContext(s);function a(e){let n=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]);