mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-29 02:08:36 +02:00
541 lines
9.6 KiB
Text
541 lines
9.6 KiB
Text
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:
|
|
|
|
- https://github.com/facebook/docusaurus/pull/1584
|
|
- https://github.com/facebook/docusaurus/pull/3749
|
|
- https://github.com/facebook/docusaurus/pull/6177
|
|
|
|
## Code block prism language tests
|
|
|
|
Code block with/without the good prism language case(lower or upper) in `additionalLanguages[]`
|
|
|
|
```php title="php"
|
|
<?php
|
|
$x=15;
|
|
$y=30;
|
|
$z=$x+$y;
|
|
echo "Sum: ",$z;
|
|
?>
|
|
```
|
|
|
|
```PHP title="PHP"
|
|
<?php
|
|
$x=15;
|
|
$y=30;
|
|
$z=$x+$y;
|
|
echo "Sum: ",$z;
|
|
?>
|
|
```
|
|
|
|
```pHp title="pHp"
|
|
<?php
|
|
$x=15;
|
|
$y=30;
|
|
$z=$x+$y;
|
|
echo "Sum: ",$z;
|
|
?>
|
|
```
|
|
|
|
See:
|
|
|
|
- https://github.com/facebook/docusaurus/pull/9183
|
|
|
|
## `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 `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 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>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Magic comments tests
|
|
|
|
```lua title="lua_sum.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 title="haskell.hs"
|
|
stringLength :: String -> Int
|
|
-- highlight-next-line
|
|
stringLength [] = 0
|
|
stringLength (x:xs) = 1 + stringLength xs
|
|
```
|
|
|
|
```wasm title="sum_webAssembly.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 title="sql_query.sql"
|
|
-- highlight-start
|
|
SELECT *
|
|
FROM orders
|
|
-- highlight-end
|
|
WHERE customer_id IN (
|
|
SELECT customer_id
|
|
-- highlight-next-line
|
|
FROM customers
|
|
WHERE country = 'USA'
|
|
)
|
|
```
|
|
|
|
```sql title="sql_query_block.sql"
|
|
/* highlight-start */
|
|
SELECT *
|
|
FROM orders
|
|
/* highlight-end */
|
|
WHERE customer_id IN (
|
|
SELECT customer_id
|
|
/* highlight-next-line */
|
|
FROM customers
|
|
WHERE country = 'USA'
|
|
)
|
|
```
|
|
|
|
```matlab title="matlab.m"
|
|
% highlight-start
|
|
function result = times2(n)
|
|
result = n * 2;
|
|
end
|
|
% highlight-end
|
|
|
|
x = 10;
|
|
% highlight-next-line
|
|
y = times2(x);
|
|
```
|
|
|
|
```latex title="latex.tex"
|
|
\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 title="vba.vb"
|
|
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 title="vbnet.vb"
|
|
' highlight-next-line
|
|
Dim languages As New HashSet(Of String) From {
|
|
"C#",
|
|
"Visual Basic",
|
|
_ ' highlight-start
|
|
"F#",
|
|
"PowerShell",
|
|
"TypeScript"
|
|
_' highlight-end
|
|
}
|
|
```
|
|
|
|
```batch title="cmd.bat"
|
|
rem highlight-start
|
|
@echo off
|
|
setlocal
|
|
Rem highlight-end
|
|
ipconfig
|
|
REM highlight-next-line
|
|
echo Docusaurus is awesome
|
|
netstat
|
|
```
|
|
|
|
```fortran title="fortran.f90"
|
|
! highlight-start
|
|
program hello
|
|
! highlight-end
|
|
implicit none
|
|
! highlight-next-line
|
|
print *, "Hello, World!"
|
|
end program hello
|
|
```
|
|
|
|
```cobol title="cobol.cob"
|
|
*> highlight-start
|
|
IDENTIFICATION DIVISION.
|
|
PROGRAM-ID. HELLO.
|
|
*> highlight-end
|
|
PROCEDURE DIVISION.
|
|
*> highlight-next-line
|
|
DISPLAY "Hello, World!".
|
|
END PROGRAM HELLO.
|
|
```
|
|
|
|
```fsharp title="fsharp.fsx"
|
|
(* 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
|
|
|
|
{/* prettier-ignore */}
|
|
```
|
|
```
|
|
|
|
Empty 1 line code block
|
|
|
|
```
|
|
|
|
```
|
|
|
|
Empty 2 line code block
|
|
|
|
```
|
|
|
|
```
|
|
|
|
Empty live code block
|
|
|
|
```js live
|
|
|
|
```
|