Templates

Code Blocks

Error Highlighting

Input:

```js
const name = null;
// highlight-error-next-line
console.log(name.toUpperCase());
// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')
```

Output:

const name = null;
console.log(name.toUpperCase());
// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')

Pseudocode

Default options:

{
  indentSize: '1.2em',
  commentDelimiter: '//',
  lineNumber: false,
  lineNumberPunc: ':',
  noEnd: false,
  captionCount: undefined,
}

Quicksort Example

Input:

/src/components/_Pseudocodes/quicksort.tex

\begin{algorithm}
\caption{Quicksort}
\begin{algorithmic}
\PROCEDURE{Quicksort}{$A, p, r$}
    \IF{$p < r$} 
        \STATE $q = $ \CALL{Partition}{$A, p, r$}
        \STATE \CALL{Quicksort}{$A, p, q - 1$}
        \STATE \CALL{Quicksort}{$A, q + 1, r$}
    \ENDIF
\ENDPROCEDURE
\PROCEDURE{Partition}{$A, p, r$}
    \STATE $x = A[r]$
    \STATE $i = p - 1$
    \FOR{$j = p$ \TO $r - 1$}
        \IF{$A[j] < x$}
            \STATE $i = i + 1$
            \STATE exchange
            $A[i]$ with $A[j]$
        \ENDIF
        \STATE exchange $A[i]$ with $A[r]$
    \ENDFOR
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}

import Pseudocode from '@site/src/components/Pseudocode';
import qSort from '!!raw-loader!@site/src/components/_Pseudocodes/quicksort.tex';

<Pseudocode
    content={qSort}
    algID="quicksort"
    options={{ lineNumber: true, captionCount: 4 }}
/>

Output:

% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
\begin{algorithm}
\caption{Quicksort}
\begin{algorithmic}
\PROCEDURE{Quicksort}{$A, p, r$}
    \IF{$p < r$} 
        \STATE $q = $ \CALL{Partition}{$A, p, r$}
        \STATE \CALL{Quicksort}{$A, p, q - 1$}
        \STATE \CALL{Quicksort}{$A, q + 1, r$}
    \ENDIF
\ENDPROCEDURE
\PROCEDURE{Partition}{$A, p, r$}
    \STATE $x = A[r]$
    \STATE $i = p - 1$
    \FOR{$j = p$ \TO $r - 1$}
        \IF{$A[j] < x$}
            \STATE $i = i + 1$
            \STATE exchange
            $A[i]$ with $A[j]$
        \ENDIF
        \STATE exchange $A[i]$ with $A[r]$
    \ENDFOR
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}

Math

Cases

Input:

x = 
\begin{cases}
  a &\text{if } \\
  c &\text{if } d
\end{cases}

Output:

$$x = \begin{cases} a &\text{if}\ b \\ c &\text{if}\ d \end{cases}$$

Matrices

No Braces

Input:

\begin{matrix}
   a & b \\
   c & d
\end{matrix}

Output:

$$\begin{matrix} a & b \\ c & d \end{matrix}$$

Parenthetical Braces

Input:

\begin{pmatrix}
  a & b \\
  c & d
\end{pmatrix}

Output:

$$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$$

Bracket Braces

Input:

\begin{bmatrix}
  a & b \\
  c & d
\end{bmatrix}

Output:

$$\begin{bmatrix} a & b \\ c & d \end{bmatrix}$$

Curly Braces

Input:

\begin{Bmatrix}
  a & b \\
  c & d
\end{Bmatrix}

Output:

$$\begin{Bmatrix} a & b \\ c & d \end{Bmatrix}$$

Tabs

Multi-language support code blocks

Input:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="js" label="JavaScript">

```js
function helloWorld() {
  console.log('Hello, world!');
}
```

</TabItem>
<TabItem value="py" label="Python">

```py
def hello_world():
  print("Hello, world!")
```

</TabItem>
<TabItem value="java" label="Java">

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

</TabItem>
</Tabs>

Output:

JavaScript

function helloWorld() {
  console.log('Hello, world!');
}

Python

def hello_world():
  print("Hello, world!")

Java

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

Default Tab

Input:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="js" label="JavaScript">

```js
function helloWorld() {
    console.log('Hello, world!');
}
```

</TabItem>
<TabItem value="py" label="Python" default>

```py
def hello_world():
  print("Hello, world!")
```

</TabItem>
</Tabs>

Output:

JavaScript

function helloWorld() {
    console.log('Hello, world!');
}

Python

def hello_world():
  print("Hello, world!")

Initially Hidden Tab Content

Input:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs defaultValue={null}>
<TabItem value="js" label="JavaScript">

```js
function helloWorld() {
    console.log('Hello, world!');
}
```

</TabItem>
<TabItem value="py" label="Python">

```py
def hello_world():
  print("Hello, world!")
```

</TabItem>
</Tabs>

Output:

JavaScript

function helloWorld() {
    console.log('Hello, world!');
}

Python

def hello_world():
  print("Hello, world!")

Synced Tab Choices

Input:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Use Ctrl + C to copy.</TabItem>
  <TabItem value="mac" label="macOS">Use Command + C to copy.</TabItem>
</Tabs>

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Use Ctrl + V to paste.</TabItem>
  <TabItem value="mac" label="macOS">Use Command + V to paste.</TabItem>
</Tabs>

Output:

Windows

Use Ctrl + C to copy.

macOS

Use Command + C to copy.

Windows

Use Ctrl + V to paste.

macOS

Use Command + V to paste.

Admonitions

Markdown blocks of the form

:::note|tip|info|caution|danger|<custom>

Content

:::

produce the following respectively (note for the <custom> choice the type of admonition is still specified for styling purposes):

note

Content

tip

Content

info

Content

caution

Content

danger

Content

custom title with caution theme

Content

Video Content

Single Video

Input:

import VideoContent from '@site/src/components/VideoContent';

<VideoContent 
  type="note" 
  videoUrls={[
    'https://www.youtube.com/embed/XV-u_Ow47s0'
  ]}
>

This is a bunch of content that you can place within the video admonition. 
Even math like $\sin(x)$ can be included.

</VideoContent>

Output:

video content

This is a bunch of content that you can place within the video admonition. Even math like $\sin(x)$ can be included.

Multiple Videos

Input:

import VideoContent from '@site/src/components/VideoContent';

<VideoContent 
  type="caution" 
  title="something cool and something nice" 
  videoUrls={[
    "https://www.youtube.com/embed/cN9c_JyvL1A", 
    "https://www.youtube.com/embed/XV-u_Ow47s0"
  ]
}>

This is a bunch of content that you can place within the video admonition. 
Even math like $\sin(x)$ can be included.

</VideoContent>

Output:

something cool and something nice

This is a bunch of content that you can place within the video admonition. Even math like $\sin(x)$ can be included.

Watch Video Directly

Input:

import ReactPlayer from 'react-player';

<div className="player-wrapper">
    <ReactPlayer
        width="100%"
        height="100%"
        className="react-player"
        controls={true}
        playing={false}
        loop={false}
        volume={1}
        muted={false}
        url="https://www.youtube.com/watch?v=8aGhZQkoFbQ"
    />
</div>

Output:

Icons

Material-UI icons can be used.

Input:

import AcUnitIcon from '@mui/icons-material/AcUnit';
import { orange } from '@mui/material/colors';

The icon <AcUnitIcon className='material-icon' sx={{ color: orange[500] }} /> is kind of cool.

Output:

The icon is kind of cool.

Partials

Partials make it possible to design different "sources of truth" for different contexts.

Input:

/docs/_partials/_markdown-partial-example.mdx

<span>This content concerns the following: {props.name}</span>.

<br />
<br />

| Something | Else |
| :-- | :-- |
| $O(4)$ | $O(n^2)$ |
| $O(\log n)$ | $\lg 2$| 

This content came from `_markdown-partial-example.mdx`.

import PartialExample from '@site/docs/_partials/_markdown-partial-example.mdx';

<PartialExample name="time and space complexity" />

Output:

This content concerns the following: time and space complexity.

Something	Else
$O(4)$	$O(n^2)$
$O(\log n)$	$\lg 2$

This content came from _markdown-partial-example.mdx.

Table of Contents

Table of contents entries are stored as objects with id, level, and value properties. For example:

{
  id: "theme-plugin-and-preset-configurations"
  level: 3
  value: "Theme, plugin, and preset configurations"
}

You can use this information to inform how you have table of contents menus created on your page. The formatting can be rather basic or highly customized.

All page contents

Input:

import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc} />

Output:

See this page's full table of contents

• Code Blocks
  • Error Highlighting
• Pseudocode
  • Quicksort Example
• Math
  • Cases
  • Matrices
    • No Braces
    • Parenthetical Braces
    • Bracket Braces
    • Curly Braces
• Tabs
  • Multi-language support code blocks
  • Default Tab
  • Initially Hidden Tab Content
  • Synced Tab Choices
• Admonitions
• Video Content
  • Single Video
  • Multiple Videos
  • Watch Video Directly
• Icons
• Partials
• Table of Contents
  • All page contents
  • Filtered contents
  • Custom contents
• Diagrams and Visualizations (Mermaid)
  • Flowchart
  • Sequence diagram
  • Gantt diagram
  • Class diagram
  • Entity relationship diagram
  • User journey diagram

Filtered contents

Input:

import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc} minHeadingLevel={3} maxHeadingLevel={3} />

Output:

See just the h3 level headings for this page's table of contents

• Error Highlighting
• Quicksort Example
• Cases
• Matrices
• Multi-language support code blocks
• Default Tab
• Initially Hidden Tab Content
• Synced Tab Choices
• Single Video
• Multiple Videos
• Watch Video Directly
• All page contents
• Filtered contents
• Custom contents
• Flowchart
• Sequence diagram
• Gantt diagram
• Class diagram
• Entity relationship diagram
• User journey diagram

Custom contents

Input:

import TOCInline from '@theme/TOCInline';

<TOCInline 
  toc={[{id: 'something-1', level: 2, value: 'Something I made up'}, ... toc.filter(({level, value}, _, arr) => level >= 3 || (level == 2 && value == 'Code Blocks')), {id: 'something-2', level: 4, value: 'Something you made up'}]}
/>

Output:

See a much more customized TOC for this page (including made up entries)

• Something I made up
• Code Blocks
  • Error Highlighting
  • Quicksort Example
  • Cases
  • Matrices
    • No Braces
    • Parenthetical Braces
    • Bracket Braces
    • Curly Braces
  • Multi-language support code blocks
  • Default Tab
  • Initially Hidden Tab Content
  • Synced Tab Choices
  • Single Video
  • Multiple Videos
  • Watch Video Directly
  • All page contents
  • Filtered contents
  • Custom contents
  • Flowchart
  • Sequence diagram
  • Gantt diagram
  • Class diagram
  • Entity relationship diagram
  • User journey diagram
    • Something you made up

Diagrams and Visualizations (Mermaid)

Check out the Mermaid documentation for more details. Many capabilities are possible. Some are highlighted below:

• Flowchart
• Sequence diagram
• Class Diagram
• State Diagram
• Entity Relationship Diagram
• User Journey
• Gantt
• Pie Chart
• Requirement Diagram

Flowchart

Input:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Output:

graph TD; A-->B; A-->C; B-->D; C-->D;

Sequence diagram

Input:

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

Output:

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Gantt diagram

Input:

```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
```

Output:

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d

Class diagram

Input:

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

Output:

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

Entity relationship diagram

Input:

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

Output:

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User journey diagram

Input:

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```

Output:

journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me