Markdown .md tests

This file should be interpreted in a more CommonMark compliant way

SEO

<head>
  <title>HEAD Markdown Page tests title</title>
  <meta name="keywords" content="cooking, blog"/>
</head>

<head> <title>HEAD Markdown Page tests title</title> <meta name="keywords" content="cooking, blog"/> </head>

:::danger

TODO unsupported (yet), see issue

:::

Comment

Html comment:

Html comment multi-line:

MDX comment:

MDX comment multi-line:

{/* comment */}

JSX syntax

import BrowserWindow from '@site/src/components/BrowserWindow';

BrowserWindow content

</BrowserWindow>

export const answer = 42;

Test {xyz}

Admonition

Admonitions still work

:::note[title]

note

:::

Details

<details> <summary>MD Summary</summary>

Our custom Details/Summary also works in CommonMark mode

</details>

Tab

<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>

:::danger

TODO unsupported (yet), see issue

:::

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>
      // highlight-start
      long long long long long long long long long long long long line
      // highlight-end
    </div>
  );
}

jsx

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>
  );
}

:::danger

TODO unsupported (yet), see issue

:::

Mermaid

mermaid

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!

Heading Id {#custom-heading-id}

Custom heading syntax {#custom-heading-id} still works

HTML

Styling

<p style="color: green;">green p</p>

<button style="color: red;">red button</button>

Embeds

Closed image tag:

Unclosed image tag:

Iframe

Security

<p>
  When pressing this button, no alert should be printed
  <button onClick="alert('unsafe');">Click me</button>
</p>

<p> When pressing this button, no alert should be printed <button onClick="alert('unsafe');">Click me</button> </p>