Back to Docusaurus

Code block tests

website/_dogfooding/_pages tests/code-block-tests.mdx

3.10.19.8 KB
Original Source

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

:::danger legacy test page - MDX v1

This test page is quite outdated: MDX v2 lowercase tags are not substituted anymore in the same way as they were in v1.

:::


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

See:

Code block prism language tests

Code block with/without the good prism language case(lower or upper) in additionalLanguages[]

php
<?php
$x=15;
$y=30;
$z=$x+$y;
echo "Sum: ",$z;
?>
PHP
<?php
$x=15;
$y=30;
$z=$x+$y;
echo "Sum: ",$z;
?>
pHp
<?php
$x=15;
$y=30;
$z=$x+$y;
echo "Sum: ",$z;
?>

See:

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

<strong>Input: </strong>a = "abcd", b = "cdabcdab"

<strong>Output: </strong>3

<strong>Explanation: </strong>a after three repetitions become "ab<strong> cdabcdab </strong>cd", at which time b is a substring.

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

<strong>Input: </strong>a = "abcd", b = "cdabcdab"

<strong>Output: </strong>3

<strong>Explanation: </strong>a after three repetitions become "ab<strong> cdabcdab </strong>cd", at which time b is a substring.

</CodeBlock>

Code blocks with ReactNode in title

<CodeBlock language="yaml" title={ <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}> <span> <code>ReactNode</code> title </span>{' '} <span className="badge badge--primary">YAML</span> </div> }> {link: title: front page path: /docs/} </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
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
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
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

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

Magic comments tests

lua
function sum(n)
  -- highlight-next-line
  local result = 0
  for i = 1, n do
   -- highlight-start
    result = result + i
  end
  -- highlight-end
  print(result)
end
haskell
stringLength :: String -> Int
-- highlight-next-line
stringLength [] = 0
stringLength (x:xs) = 1 + stringLength xs
wasm
(module
  ;; highlight-next-line
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    ;; highlight-start
    local.get $b
    i32.add)
    ;; highlight-end
  (export "add" (func $add)))
sql
-- highlight-start
SELECT *
FROM orders
-- highlight-end
WHERE customer_id IN (
  SELECT customer_id
  -- highlight-next-line
  FROM customers
  WHERE country = 'USA'
)
sql
/* highlight-start */
SELECT *
FROM orders
/* highlight-end */
WHERE customer_id IN (
  SELECT customer_id
  /* highlight-next-line */
  FROM customers
  WHERE country = 'USA'
)
matlab
% highlight-start
function result = times2(n)
  result = n * 2;
end
% highlight-end

x = 10;
% highlight-next-line
y = times2(x);
latex
\begin{document}
	\section{Triangles}
	% highlight-next-line
	\subsection{Pythagoras' Theorem}
	Pythagoras's theorem is:
	% highlight-start
	\begin{equation}
		c^2 = a^2 + b^2
	\end{equation}
	% highlight-end
\end{document}
vba
Function Factorial(ByVal n As Long) As Long
    If n < 0 Then
        Err.Raise 5 ' Invalid argument
    End If
    'highlight-next-line
    Factorial = 1 ' return value
    Dim i As Long
    ' highlight-start
    For i = 2 To n
        Factorial = Factorial * i
    Next
    ' highlight-end
End Function
vbnet
' highlight-next-line
Dim languages As New HashSet(Of String) From {
    "C#",
    "Visual Basic",
    _ ' highlight-start
    "F#",
    "PowerShell",
    "TypeScript"
    _' highlight-end
}
batch
rem highlight-start
@echo off
setlocal
Rem highlight-end
ipconfig
REM highlight-next-line
echo Docusaurus is awesome
netstat
fortran
! highlight-start
program hello
! highlight-end
  implicit none
  ! highlight-next-line
  print *, "Hello, World!"
end program hello
cobol
*> highlight-start
IDENTIFICATION DIVISION.
PROGRAM-ID. HELLO.
*> highlight-end
PROCEDURE DIVISION.
  *> highlight-next-line
  DISPLAY "Hello, World!".
END PROGRAM HELLO.
fsharp
(* highlight-start *)
[<EntryPoint>]
(* highlight-end *)
let main _ =
    // highlight-next-line
    printfn "Hello, World!"
    0

HTML - script + style highlighting

See https://github.com/facebook/docusaurus/issues/9517

html
<html lang="en">
  <head>
    <script>
      const name = 'Formidable';
      console.log(name);
    </script>
    <style>
      .some-class {
        border: solid red thick;
      }
    </style>
  </head>
</html>

Empty code blocks edge cases

Empty inline code block: ``

Single space inline code block:

Empty code block

Empty 1 line code block

Empty 2 line code block

Empty live code block

js