Markdown .mdx tests
This is a page generated from Markdown to illustrate the Markdown page feature and test some edge cases.
Useful information.
function Button() { return ( <button type="button" onClick={() => alert('hey')}> Click me! </button> ); }
Using absolute pathβ
Tabβ
- Apple
- Orange
- Banana
This is an apple π
This is an orange π
This is a banana π
Commentsβ
Html comment:
Html comment multi-line:
MDX comment:
MDX comment multi-line:
Import code block from source code fileβ
Let's say you have a React component.
You can import and use it in MDX:
import MyComponent from './myComponent';
<MyComponent />;
MyComponent rendered !
bool=false
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>;
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, {useState} from 'react';
export default function MyComponent() {
const [bool, setBool] = useState(false);
return (
<div>
<p>MyComponent rendered !</p>
<p>bool={bool ? 'true' : 'false'}</p>
<p>
<button onClick={() => setBool((b) => !b)}>toggle bool</button>
</p>
</div>
);
}
Testβ
function Demo() { useEffect(() => console.log('mount'), []); return null; }
Code block testβ
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>
{/* prettier-ignore */}
long long long long long long long long long long long long line
{/* prettier-ignore */}
</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> ); }
Mermaidβ
Custom heading IDβ
Weird headingβ
Weird headingβ
Weird headingβ
Weird headingβ
Weird headingβ
Pipeβ
Code tag + double pipe: ||
Code tag + double pipe: ||
Images edge casesβ
Detailsβ
Details
Details without a summary
My Headline
Details
This is a fragment:
HelloIt should work :)
Task listβ
A list:
- Simple
- Tasks
- Has simple
- Styles
Another list:
- Nested
- Tasks
- Should be well-formatted
- No matter
- How weird
Can be arbitrarily nested:
- Level
- Task
- Task
- Another level
- Task
- Task
- Deeper
- Task
- Task
- Task
- Task
- Task
Emojisβ
Emojis in this text will be replaced with remark-emoji: πΆ π
Admonitionsβ
title
with a (old syntax)Admonition body
title
with a (directive label syntax)Admonition body
Admonition alias :::important
should have Important title
Some content with Markdown syntax
.
Some content with Markdown syntax
.
Some content with Markdown syntax
.
hey
test
- Apple
- Orange
- Banana
test
Linkingβ
This is a test page to see if Docusaurus Markdown features are working properly
Linking to assetsβ
See #3337
Linking to non-SPA page hosted within websiteβ
See #3309
Linking to non-SPA page with Link componentβ
See #9758, these external urls should not be reported by the broken links checker:
- β pathname:///dogfooding/javadoc#goodlink1
- β pathname:///dogfooding/javadoc#goodlink2
- β /dogfooding/javadoc#goodlink3 (target=_blank)
- β /dogfooding/javadoc#goodlink4 (target=_blank)
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:
- β /dogfooding/javadoc#badlink1
- β /dogfooding/javadoc#badlink2
- β /dogfooding/javadoc#badlink3 (target=_self)
- β /dogfooding/javadoc#badlink4 (target=_self)