Skip to main content

Code block tests

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.

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)

1 2 3
1
2
3

pre > string[]​

1
2
3

pre > element​

http://localhost:3000
Lol bro

pre > element[]​

Front page

Input: a = "abcd", b = "cdabcdab"

Output: 3

Explanation: a after three repetitions become "ab
cdabcdabcd", at which time b is a substring.

pre > code > element​

Hey bro

code​

code > string​

1 2 3 link: title: front page path: /docs/

code > string[]​

link: title: front page path: /docs/

code > element​

http://localhost:3000
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
test
link:
title: front page
path: /docs/

CodeBlock > string[]​

link:

  title: front page

  path: /docs/

CodeBlock > element​

http://localhost:3000
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) {
  return <Layout title="Awesome Docusaurus page" description="Test Test Test Test Test Test Test Test Test Test Test Test Test Test ">;
}
function PageLayout(props) {
  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 medium_length_string_will_have_the_option_to_wrap_after_window_resized_while_it_is_hidden
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_sum.lua
function sum(n)
  local result = 0
  for i = 1, n do
    result = result + i
  end
  print(result)
end
haskell.hs
stringLength :: String -> Int
stringLength [] = 0
stringLength (x:xs) = 1 + stringLength xs
sum_webAssembly.wasm
(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  (export "add" (func $add)))
sql_query.sql
SELECT *
FROM orders
WHERE customer_id IN (
  SELECT customer_id
  FROM customers
  WHERE country = 'USA'
)
sql_query_block.sql
SELECT *
FROM orders
WHERE customer_id IN (
  SELECT customer_id
  FROM customers
  WHERE country = 'USA'
)
matlab.m
function result = times2(n)
  result = n * 2;
end

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

HTML - script + style highlighting​

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

<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

Live Editor
Result
Loading...
Edit this page
Last updated on by William Black