website/_dogfooding/_pages tests/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';
:::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.
:::
class HelloWorld {
public static void main(String args[]) {
System.out.println("Hello, World");
}
}
See:
Code block with/without the good prism language case(lower or upper) in additionalLanguages[]
<?php
$x=15;
$y=30;
$z=$x+$y;
echo "Sum: ",$z;
?>
<?php
$x=15;
$y=30;
$z=$x+$y;
echo "Sum: ",$z;
?>
<?php
$x=15;
$y=30;
$z=$x+$y;
echo "Sum: ",$z;
?>
See:
prepre > stringMulti-line text inside pre will turn into one-liner, but it's okay (https://github.com/mdx-js/mdx/issues/1095)
pre > string[]pre > elementpre > element[]pre > code > elementcodecode > string<code>1 2 3</code>
<code> {`link: title: front page path: /docs/`} </code>code > string[]code > elementcode > element[]<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>CodeBlockCodeBlock > string<CodeBlock>1 2 3</CodeBlock>
<CodeBlock className="language-yaml" title="test"> {`link: title: front page path: /docs/`} </CodeBlock>CodeBlock > string[]CodeBlock > elementCodeBlock > element[]<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>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>
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) {
// 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 ',
);
}
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>
);
}
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
stringLength :: String -> Int
-- highlight-next-line
stringLength [] = 0
stringLength (x:xs) = 1 + stringLength xs
(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)))
-- highlight-start
SELECT *
FROM orders
-- highlight-end
WHERE customer_id IN (
SELECT customer_id
-- highlight-next-line
FROM customers
WHERE country = 'USA'
)
/* highlight-start */
SELECT *
FROM orders
/* highlight-end */
WHERE customer_id IN (
SELECT customer_id
/* highlight-next-line */
FROM customers
WHERE country = 'USA'
)
% highlight-start
function result = times2(n)
result = n * 2;
end
% highlight-end
x = 10;
% highlight-next-line
y = times2(x);
\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}
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
' highlight-next-line
Dim languages As New HashSet(Of String) From {
"C#",
"Visual Basic",
_ ' highlight-start
"F#",
"PowerShell",
"TypeScript"
_' highlight-end
}
rem highlight-start
@echo off
setlocal
Rem highlight-end
ipconfig
REM highlight-next-line
echo Docusaurus is awesome
netstat
! highlight-start
program hello
! highlight-end
implicit none
! highlight-next-line
print *, "Hello, World!"
end program hello
*> highlight-start
IDENTIFICATION DIVISION.
PROGRAM-ID. HELLO.
*> highlight-end
PROCEDURE DIVISION.
*> highlight-next-line
DISPLAY "Hello, World!".
END PROGRAM HELLO.
(* highlight-start *)
[<EntryPoint>]
(* highlight-end *)
let main _ =
// highlight-next-line
printfn "Hello, World!"
0
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 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