code-block-tests.mdx

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

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

See:

• #1584
• #3749
• #6177

pre

pre > string

Multi-line text inside pre will turn into one-liner, but it's okay (mdx-js/mdx#1095)

1 2 3

1
2
3

pre > string[]

  1{'\n'}2{'\n'}3{'\n'}

pre > element

  Lol bro

pre > element[]

  Front page
  {'\n'}
  Input: a = "abcd", b = "cdabcdab"{'\n'}
  Output: 3{'\n'}
  Explanation: a after three repetitions become "ab
  cdabcdabcd", at which time b is a substring.{'\n'}

pre > code > element

  
    Hey bro
  

code

code > string

1 2 3

{`link: title: front page path: /docs/`}

code > string[]

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

code > element

Lol bro

code > element[]

Front page
Input: a = "abcd", b = "cdabcdab"
Output: 3
Explanation: a after three repetitions become "ab cdabcdab cd", at which time b is a substring.


CodeBlock

CodeBlock > string

1 2 3

{`link: title: front page path: /docs/`}

CodeBlock > string[]

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

CodeBlock > element

Lol bro

CodeBlock > element[]

Front page
Input: a = "abcd", b = "cdabcdab"
Output: 3
Explanation: a after three repetitions become "ab cdabcdab cd", at which time b is a substring.

Code blocks with line numbering tests

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

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

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

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

echo "hi"

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

rm short_initially_hidden_string

echo medium_length_string_will_have_the_option_to_wrap_after_window_resized_while_it_is_hidden

echo "short_initially_hidden_string"

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