import CodeBlock from '@theme/CodeBlock';
import BrowserWindow from '@site/src/components/BrowserWindow';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Code block tests

```java
class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}
```

See:

- https://github.com/facebook/docusaurus/pull/1584
- https://github.com/facebook/docusaurus/pull/3749
- https://github.com/facebook/docusaurus/pull/6177

## `pre`

### `pre > string`

Multi-line text inside `pre` will turn into one-liner, but it's okay (https://github.com/mdx-js/mdx/issues/1095)

<pre>1 2 3</pre>

<!-- prettier-ignore -->
<pre>
1
2
3
</pre>

### `pre > string[]`

<pre>
  1{'\n'}2{'\n'}3{'\n'}
</pre>

### `pre > element`

<pre>
  <BrowserWindow>Lol bro</BrowserWindow>
</pre>

### `pre > element[]`

<pre>
  <a href="/">Front page</a>
  {'\n'}
  <strong>Input: </strong>a = "abcd", b = "cdabcdab"{'\n'}
  <strong>Output: </strong>3{'\n'}
  <strong>Explanation: </strong>a after three repetitions become "ab
  <strong>cdabcdab</strong>cd", at which time b is a substring.{'\n'}
</pre>

### `pre > code > element`

<pre>
  <code>
    <b>Hey bro</b>
  </code>
</pre>

## `code`

### `code > string`

<code>1 2 3</code>

<code>
  {`link:
  title: front page
  path: /docs/`}
</code>

### `code > string[]`

<code>
  link:{' \n'}
  {'  '}title: front page{'\n'}
  {'  '}path: /docs/{'\n'}
</code>

### `code > element`

<code>
  <BrowserWindow>Lol bro</BrowserWindow>
</code>

### `code > element[]`

<code>
  <a href="/">Front page</a>
  <br />
  <strong>Input: </strong>a = "abcd", b = "cdabcdab"
  <br />
  <strong>Output: </strong>3<br />
  <strong>Explanation: </strong>a after three repetitions become "ab<strong>
    cdabcdab
  </strong>cd", at which time b is a substring.
  <br />
</code>

## `CodeBlock`

### `CodeBlock > string`

<CodeBlock>1 2 3</CodeBlock>

<CodeBlock className="language-yaml" title="test">
  {`link:
  title: front page
  path: /docs/`}
</CodeBlock>

### `CodeBlock > string[]`

<CodeBlock className="language-yaml" title="test">
  link:{'\n'}
  {'  '}title: front page{'\n'}
  {'  '}path: /docs/{'\n'}
</CodeBlock>

### `CodeBlock > element`

<CodeBlock className="language-yaml" title="test">
  <BrowserWindow>Lol bro</BrowserWindow>
</CodeBlock>

### `CodeBlock > element[]`

<CodeBlock className="language-yaml" title="test">
  <a href="/">Front page</a>
  <br />
  <strong>Input: </strong>a = "abcd", b = "cdabcdab"
  <br />
  <strong>Output: </strong>3<br />
  <strong>Explanation: </strong>a after three repetitions become "ab<strong>
    cdabcdab
  </strong>cd", at which time b is a substring.
  <br />
</CodeBlock>

## Code blocks with line numbering tests

```jsx
function PageLayout(props) {
  // highlight-next-line
  return <Layout title="Awesome Docusaurus page" description="Test Test Test Test Test Test Test Test Test Test Test Test Test Test ">;
}
```

```jsx showLineNumbers
function PageLayout(props) {
  // highlight-next-line
  return <Layout title="Awesome Docusaurus page" description="Test Test Test Test Test Test Test Test Test Test Test Test Test Test ">;
}
```

```jsx {1,3,6} showLineNumbers
function PageLayout(props) {
  console.log(
    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
  );
  console.log(
    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
  );
  console.log(
    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
  );
  console.log(
    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
  );
  console.log(
    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
  );
  console.log(
    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
  );
  console.log(
    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
  );
  console.log(
    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
  );
  console.log(
    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
  );
}
```

## Code block wrapping tests

[// spell-checker:disable]: #

```bash
mkdir this_is_a_loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong_string_to_test_code_block_wrapping
echo "this is a long string made up of many separate words that should be broken between words when possible"
curl https://docusaurus.io/tests/pages/code-block-tests
```

<Tabs>

<TabItem value="short-tab-1" label="Short tab">

```bash
echo "hi"
```

</TabItem>
<TabItem value="long-tab" label="Long tab">

```bash
echo this will test whether a long string that is initially hidden will have the option to wrap when made visible
```

</TabItem>

<TabItem value="short-tab-2" label="Short tab">

```bash
rm short_initially_hidden_string
```

</TabItem>
</Tabs>

<Tabs>

<TabItem value="long-tab" label="Long tab">

```bash
echo medium_length_string_will_have_the_option_to_wrap_after_window_resized_while_it_is_hidden
```

</TabItem>

<TabItem value="short-tab" label="Short tab">

```bash
echo "short_initially_hidden_string"
```

</TabItem>
</Tabs>

[// spell-checker:enable]: #

```jsx showLineNumbers
import React from 'react';
import Layout from '@theme/Layout';

export default function MyReactPage() {
  return (
    <Layout>
      <h1>My React page</h1>
      <p>
        This is a React page. Let's make this sentence bit long. Some more words
        to make sure... Some more words to make sure... Some more words to make
        sure...
      </p>
    </Layout>
  );
}
```
