website/_dogfooding/_pages tests/markdown-tests-mdx.mdx
<button onClick={() => alert('unsafe :s')}>Should not alert</button>
This is a page generated from Markdown to illustrate the Markdown page feature and test some edge cases.
:::info
Useful information.
:::
function Button() {
return (
<button type="button" onClick={() => alert('hey')}>
Click me!
</button>
);
}
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs> <TabItem value="apple" label="Apple" default> This is an apple 🍎 </TabItem> <TabItem value="orange" label="Orange"> This is an orange 🍊 </TabItem> <TabItem value="banana" label="Banana"> This is a banana 🍌 </TabItem> </Tabs>MDX comment:
MDX comment in JSX:
<>
<div> TEST </div> </>import MyComponent from '@site/src/pages/examples/_myComponent';
import BrowserWindow from '@site/src/components/BrowserWindow';
Let's say you have a React component.
You can import and use it in MDX:
import MyComponent from './myComponent';
<MyComponent />;
But you can also display its source code directly in MDX, thanks to Webpack raw-loader
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!./myComponent';
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>;
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent';
<BrowserWindow><CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
</BrowserWindow>function Demo() {
useEffect(() => console.log('mount'), []);
return null;
}
function Clock(props) {
const [date, setDate] = useState(new Date());
useEffect(() => {
var timerID = setInterval(() => tick(), 1000);
return function cleanup() {
clearInterval(timerID);
};
});
function tick() {
setDate(new Date());
}
return (
<div>
<h2>It is {date.toLocaleTimeString()}.</h2>
// highlight-start
long long long long long long long long long long long long line
// highlight-end
</div>
);
}
function Clock(props) {
const [date, setDate] = useState(new Date());
useEffect(() => {
var timerID = setInterval(() => tick(), 1000);
return function cleanup() {
clearInterval(timerID);
};
});
function tick() {
setDate(new Date());
}
return (
<div>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
);
}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Health check
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Dogfood that the classic heading ID syntax {#id} remains supported on MDX docs. It requires manual escaping with \{#id} since we disabled the MDX v1 compat layer (markdown.mdx1Compat.headingIds).
Code tag + double pipe: <code>||</code>
Code tag + double pipe: <code>||</code>
Details without a summary
</details>import Details from '@theme/Details';
<Details summary={'My Headline'}>Some Text</Details> <Details>Some Text</Details>This is a fragment:
<>Hello</>
It should work :)
A list:
Another list:
Can be arbitrarily nested:
Emojis in this text will be replaced with remark-emoji: :dog: :+1:
:::warning Interpolated title with a <button style={{color: "red"}} onClick={() => alert("it works")}>button</button> (old syntax)
Admonition body
:::
:::warning[Interpolated title with a <button style={{color: "red"}} onClick={() => alert("it works")}>button</button> (directive label syntax)]
Admonition body
:::
:::important
Admonition alias :::important should have Important title
:::
:::::note title
Some content with Markdown syntax.
::::note nested Title
:::tip very nested Title
Some content with Markdown syntax.
:::
Some content with Markdown syntax.
::::
hey
:::::
::::tip[Use tabs in admonitions]
:::info[Admonition nested]
test
:::
<Tabs> <TabItem value="apple" label="Apple">:::note[Admonition in tab]
test
:::
</TabItem> <TabItem value="orange" label="Orange">This is an orange 🍊</TabItem> <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem> </Tabs>::::
import Admonition from '@theme/Admonition';
export function AdmonitionWithoutHeading(props) {
return (
<Admonition {...props} type="info" icon={null} title={null}>
Admonition content without heading
</Admonition>
);
}
This is a test page to see if Docusaurus Markdown features are working properly
See #3337
See #3309
See #9758, these external urls should not be reported by the broken links checker:
import Link from '@docusaurus/Link';
export function TestLink({noCheck, ...props}) {
return (
<Link {...props} data-noBrokenLinkCheck={noCheck}>
{(noCheck ? '❌' : '✅') +
' ' +
(props.to ?? props.href) +
(props.target ? ` (target=${props.target})` : '')}
</Link>
);
}
These links are broken (try to single click on them) and should be reported. We need to explicitly disable the broken link checker for them: