Skip to main content

Documentation Features and Capabilities

Math​

See the KaTeX reference below to understand the full scope of what math can be typeset, but the very basics appear immediately below.

Inline math​

Inline math like sin⁡(x2)\sin(x^2) can be easily typset by $\sin(x^2)$.

Display math​

Input:

$$
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a};\quad \{x \mid ax^2+bx+c = 0 \}
$$

Output:

x=−b±b2−4ac2a;{x∣ax2+bx+c=0}x=\frac{-b\pm\sqrt{b^2-4ac}}{2a};\quad \{x \mid ax^2+bx+c = 0 \}

Math Macros​

Math macros like

docusaurus.config.js
const macros = {
    '\\x': 'x+1',
};

can be defined so that something like $\x$ can be used as a shortcut for x+1\x.

Code Blocks​

Syntax highlighting​

Syntax highlighting is supported for various languages. Docusaurus comes with some common languages supported out of the box, but this site supports syntax highlighting for several more languages:

Supported Languages

The keys for providing code blocks in the implied language are provided below:

  • apacheconf
  • applescript
  • asciidoc
  • aspnet
  • awk
  • bash
  • basic
  • c
  • clojure
  • cpp
  • csharp
  • css
  • csv
  • django
  • docker
  • editorconfig
  • ejs
  • elixir
  • erlang
  • excel-formula
  • flow
  • fortran
  • git
  • go
  • go-module
  • graphql
  • handlebars
  • http
  • java
  • javadoclike
  • javascript
  • js-extras
  • jsdoc
  • json
  • jsonp
  • jsx
  • latex
  • less
  • lisp
  • log
  • lua
  • makefile
  • markdown
  • markup
  • markup-templating
  • mermaid
  • mongodb
  • nginx
  • perl
  • php
  • php-extras
  • phpdoc
  • plsql
  • powerquery
  • powershell
  • pug
  • python
  • r
  • regex
  • ruby
  • rust
  • sas
  • sass
  • scheme
  • scss
  • shell-session
  • sql
  • systemd
  • toml
  • tsx
  • turtle
  • typescript
  • vim
  • visual-basic
  • wasm
  • wiki
  • wolfram
  • yaml

Titled code blocks​

Code blocks can optionally have titles at the top of the code block (usually the file name for where the code is located):

/src/someFile.jsx
function HelloCodeTitle(props) {
    return <h1>Hello, {props.name}</h1>;
}

Line highlighting​

Highlighting with comments​

You can use comments with highlight-next-line, highlight-start, and highlight-end to select which lines are highlighted.

Input:

```js
function HighlightSomeText(highlight) {
    if (highlight) {
        // highlight-next-line
        return 'This text is highlighted!';
    }

    return 'Nothing highlighted';
}

function HighlightMoreText(highlight) {
    // highlight-start
    if (highlight) {
        return 'This range is highlighted!';
    }
    // highlight-end

    return 'Nothing highlighted';
}
```

Output:

function HighlightSomeText(highlight) {
    if (highlight) {
        return 'This text is highlighted!';
    }

    return 'Nothing highlighted';
}

function HighlightMoreText(highlight) {
    if (highlight) {
        return 'This range is highlighted!';
    }

    return 'Nothing highlighted';
}

Highlighting with metadata string​

You can also specify highlighted line ranges within the language meta string (leave a space after the language). To highlight multiple lines, separate the line numbers by commas or use the range syntax to select a chunk of lines. This feature uses the parse-number-range library and you can find more syntax on their project details.

Input:

```jsx {1,4-6,11}
import React from 'react';

function MyComponent(props) {
    if (props.isBar) {
        return <div>Bar</div>;
    }

    return <div>Foo</div>;
}

export default MyComponent;
```

Output:

import React from 'react';

function MyComponent(props) {
    if (props.isBar) {
        return <div>Bar</div>;
    }

    return <div>Foo</div>;
}

export default MyComponent;

Error blocks​

You can also highlight error blocks by using magic comments. For example, in JavaScript, trying to access properties on null will error.

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

Line numbering​

You can enable line numbering for your code block by using the showLineNumbers key within the language meta string (just don't forget to add space directly before the key).

Input:

```jsx {1,4-6,11} showLineNumbers
import React from 'react';

function MyComponent(props) {
    if (props.isBar) {
        return <div>Bar</div>;
    }

    return <div>Foo</div>;
}

export default MyComponent;
```

Output:

import React from 'react';

function MyComponent(props) {
    if (props.isBar) {
        return <div>Bar</div>;
    }

    return <div>Foo</div>;
}

export default MyComponent;

Multi-language support code blocks​

As the Docusaurus docs note, with MDX, you can easily create interactive components within your documentation (e.g., to display code in multiple programming languages and switch between them using a tabs component).

Instead of implementing a dedicated component for multi-language support code blocks, a general-purpose <Tabs> component in the classic theme so that you can use it for other non-code scenarios as well. The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block are intentional. This is a current limitation of MDX: you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX.

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:

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

Default tab​

As noted in the Docusaurus docs, the first tab is displayed by default, and to override this behavior, you can specify a default tab by adding default to one of the tab items. You can also set the defaultValue prop of the Tabs component to the label value of your choice.

Docusaurus will throw an error if a defaultValue is provided for the Tabs but it refers to a non-existing value. If you want none of the tabs to be shown by default, use defaultValue={null}:

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

But you can add the default to a tab other than the first one (usually the default) if desired:

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

Syncing tab choices​

You may want choices of the same kind of tabs to sync with each other. For example, you might want to provide different instructions for users on Windows vs users on macOS, and you want to change all OS-specific instructions tabs in one click. To achieve that, you can give all related tabs the same groupId prop. Note that doing this will persist the choice in localStorage and all <Tab> instances with the same groupId will update automatically when the value of one of them is changed. Note that group IDs are globally namespaced.

Input:

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

Use Ctrl + C to copy.
Use Ctrl + V to paste.

For all tab groups that have the same groupId, the possible values do not need to be the same. If one tab group is chosen a value that does not exist in another tab group with the same groupId, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups don't change.

<Tabs groupId="operating-systems">
    <TabItem value="win" label="Windows">
        I am Windows.
    </TabItem>
    <TabItem value="mac" label="macOS">
        I am macOS.
    </TabItem>
    <TabItem value="linux" label="Linux">
        I am Linux.
    </TabItem>
</Tabs>
I am Windows.

Tab choices with different group IDs will not interfere with each other:

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Windows in windows.</TabItem>
  <TabItem value="mac" label="macOS">macOS is macOS.</TabItem>
</Tabs>

<Tabs groupId="non-mac-operating-systems">
  <TabItem value="win" label="Windows">Windows is windows.</TabItem>
  <TabItem value="unix" label="Unix">Unix is unix.</TabItem>
</Tabs>
Windows in windows.
Windows is windows.

Algorithm Pseudocode​

Pseudocode similar to that found in CLRS can be typeset.

Test text style​

\begin{algorithm}
\caption{Test text-style}
\begin{algorithmic}
\REQUIRE some preconditions
\ENSURE some postconditions
\INPUT some inputs
\OUTPUT some outputs
\PROCEDURE{Test-Declarations}{}
  \STATE font families: {\sffamily sffamily, \ttfamily ttfamily, \normalfont normalfont, \rmfamily rmfamily.}
    \STATE font weights: {normal weight, \bfseries bold, \mdseries medium, \lfseries lighter. }
    \STATE font shapes: {\itshape itshape \scshape Small-Caps \slshape slshape \upshape upshape.}
    \STATE font sizes: \tiny tiny \scriptsize scriptsize \footnotesize
    footnotesize \small small \normalsize normal \large large \Large Large
    \LARGE LARGE \huge huge \Huge Huge \normalsize
\ENDPROCEDURE
\PROCEDURE{Test-Commands}{}
    \STATE \textnormal{textnormal,} \textrm{textrm,} \textsf{textsf,} \texttt{texttt.}
    \STATE \textbf{textbf,} \textmd{textmd,} \textlf{textlf.}
    \STATE \textup{textup,} \textit{textit,} \textsc{textsc,} \textsl{textsl.}
    \STATE \uppercase{uppercase,} \lowercase{LOWERCASE.}
\ENDPROCEDURE
\PROCEDURE{Test-Colors}{}
% feature not implemented
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}
See input that produces output above
\begin{algorithm}
\caption{Test text-style}
\begin{algorithmic}
\REQUIRE some preconditions
\ENSURE some postconditions
\INPUT some inputs
\OUTPUT some outputs
\PROCEDURE{Test-Declarations}{}
  \STATE font families: {\sffamily sffamily, \ttfamily ttfamily, \normalfont normalfont, \rmfamily rmfamily.}
    \STATE font weights: {normal weight, \bfseries bold, \mdseries medium, \lfseries lighter. }
    \STATE font shapes: {\itshape itshape \scshape Small-Caps \slshape slshape \upshape upshape.}
    \STATE font sizes: \tiny tiny \scriptsize scriptsize \footnotesize
    footnotesize \small small \normalsize normal \large large \Large Large
    \LARGE LARGE \huge huge \Huge Huge \normalsize
\ENDPROCEDURE
\PROCEDURE{Test-Commands}{}
    \STATE \textnormal{textnormal,} \textrm{textrm,} \textsf{textsf,} \texttt{texttt.}
    \STATE \textbf{textbf,} \textmd{textmd,} \textlf{textlf.}
    \STATE \textup{textup,} \textit{textit,} \textsc{textsc,} \textsl{textsl.}
    \STATE \uppercase{uppercase,} \lowercase{LOWERCASE.}
\ENDPROCEDURE
\PROCEDURE{Test-Colors}{}
% feature not implemented
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}

Test atoms​

\begin{algorithm}
\caption{Test atoms}
\begin{algorithmic}
  \STATE \textbf{Specials:} \{ \} \$ \& \# \% \_
  \STATE \textbf{Bools:} \AND \OR \NOT \TRUE \FALSE
  \STATE \textbf{Carriage return:} first line \\ second line
  \STATE \textbf{Text-symbols:} \textbackslash
  \STATE \textbf{Quote-symbols:} `single quotes', ``double quotes''
  \STATE \textbf{Math:} $(\mathcal{C}_m)$, $i \gets i + 1$, $E=mc^2$, \( x^n + y^n = z^n \), $\$$, \(\$\)
\end{algorithmic}
\end{algorithm}
See input that produces output above
\begin{algorithm}
\caption{Test atoms}
\begin{algorithmic}
  \STATE \textbf{Specials:} \{ \} \$ \& \# \% \_
  \STATE \textbf{Bools:} \AND \OR \NOT \TRUE \FALSE
  \STATE \textbf{Carriage return:} first line \\ second line
  \STATE \textbf{Text-symbols:} \textbackslash
  \STATE \textbf{Quote-symbols:} `single quotes', ``double quotes''
  \STATE \textbf{Math:} $(\mathcal{C}_m)$, $i \gets i + 1$, $E=mc^2$, \( x^n + y^n = z^n \), $\$$, \(\$\)
\end{algorithmic}
\end{algorithm}

Test control blocks​

\begin{algorithm}
\caption{Test control blocks}
\begin{algorithmic}
\PROCEDURE{Test-If}{}
    \IF{<cond>}
        \STATE <block>
    \ELIF{<cond>}
        \STATE <block>
    \ELSE
        \STATE <block>
    \ENDIF
\ENDPROCEDURE
\PROCEDURE{Test-For}{$n$}
    \STATE $i \gets 0$
    \FOR{$i < n$}
        \PRINT $i$
        \STATE $i \gets i + 1$
    \ENDFOR
\ENDPROCEDURE
\PROCEDURE{Test-For-To}{$n$}
    \STATE $i \gets 0$
    \FOR{$i$ \TO $n$}
        \PRINT $i$
    \ENDFOR
\ENDPROCEDURE
\PROCEDURE{Test-For-DownTo}{$n$}
    \FOR{$i \gets n$ \DOWNTO $0$}
        \PRINT $i$
    \ENDFOR
\ENDPROCEDURE
\PROCEDURE{Test-For-All}{$n$}
    \FORALL{$i \in \{0, 1, \cdots, n\}$}
        \PRINT $i$
    \ENDFOR
\ENDPROCEDURE
\PROCEDURE{Test-While}{$n$}
    \STATE $i \gets 0$
    \WHILE{$i < n$}
        \PRINT $i$
        \STATE $i \gets i + 1$
    \ENDWHILE
\ENDPROCEDURE
\PROCEDURE{Test-Repeat}{$n$}
    \STATE $i \gets 0$
    \REPEAT
        \PRINT $i$
        \STATE $i \gets i + 1$
    \UNTIL{$i>n$}
\ENDPROCEDURE
\PROCEDURE{Test-Break-Continue}{$n$}
    \FOR{$i = 0$ \TO $2n$}
        \IF{$i < n/2$}
            \CONTINUE
        \ELIF{$i > n$}
            \BREAK
        \ENDIF
        \PRINT $i$
    \ENDFOR
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}
See input that produces output above
\begin{algorithm}
\caption{Test control blocks}
\begin{algorithmic}
\PROCEDURE{Test-If}{}
    \IF{&lt;cond&gt;}
        \STATE &lt;block&gt;
    \ELIF{&lt;cond&gt;}
        \STATE &lt;block&gt;
    \ELSE
        \STATE &lt;block&gt;
    \ENDIF
\ENDPROCEDURE
\PROCEDURE{Test-For}{$n$}
    \STATE $i \gets 0$
    \FOR{$i &lt; n$}
        \PRINT $i$
        \STATE $i \gets i + 1$
    \ENDFOR
\ENDPROCEDURE
\PROCEDURE{Test-For-To}{$n$}
    \STATE $i \gets 0$
    \FOR{$i$ \TO $n$}
        \PRINT $i$
    \ENDFOR
\ENDPROCEDURE
\PROCEDURE{Test-For-DownTo}{$n$}
    \FOR{$i \gets n$ \DOWNTO $0$}
        \PRINT $i$
    \ENDFOR
\ENDPROCEDURE
\PROCEDURE{Test-For-All}{$n$}
    \FORALL{$i \in \{0, 1, \cdots, n\}$}
        \PRINT $i$
    \ENDFOR
\ENDPROCEDURE
\PROCEDURE{Test-While}{$n$}
    \STATE $i \gets 0$
    \WHILE{$i &lt; n$}
        \PRINT $i$
        \STATE $i \gets i + 1$
    \ENDWHILE
\ENDPROCEDURE
\PROCEDURE{Test-Repeat}{$n$}
    \STATE $i \gets 0$
    \REPEAT
        \PRINT $i$
        \STATE $i \gets i + 1$
    \UNTIL{$i>n$}
\ENDPROCEDURE
\PROCEDURE{Test-Break-Continue}{$n$}
    \FOR{$i = 0$ \TO $2n$}
        \IF{$i &lt; n/2$}
            \CONTINUE
        \ELIF{$i > n$}
            \BREAK
        \ENDIF
        \PRINT $i$
    \ENDFOR
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}

Test statements and comments​

\begin{algorithm}
\caption{Test statements and comments}
\begin{algorithmic}
\PROCEDURE{Test-Statements}{}
    \STATE This line is a normal statement
    \PRINT \texttt{`this is print statement'}
    \RETURN $retval$
\ENDPROCEDURE

\PROCEDURE{Test-Comments}{} \COMMENT{comment for procedure}
    \STATE a statement \COMMENT{inline comment}
    \STATE \COMMENT{line comment}
    \IF{some condition}\COMMENT{comment for if}
        \RETURN \TRUE \COMMENT{another inline comment}
    \ELSE \COMMENT{comment for else}
        \RETURN \FALSE \COMMENT{yet another inline comment}
    \ENDIF
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}
See input that produces output above
\begin{algorithm}
\caption{Test statements and comments}
\begin{algorithmic}
\PROCEDURE{Test-Statements}{}
    \STATE This line is a normal statement
    \PRINT \texttt{`this is print statement'}
    \RETURN $retval$
\ENDPROCEDURE

\PROCEDURE{Test-Comments}{} \COMMENT{comment for procedure}
    \STATE a statement \COMMENT{inline comment}
    \STATE \COMMENT{line comment}
    \IF{some condition}\COMMENT{comment for if}
        \RETURN \TRUE \COMMENT{another inline comment}
    \ELSE \COMMENT{comment for else}
        \RETURN \FALSE \COMMENT{yet another inline comment}
    \ENDIF
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}

Quicksort​

% 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}
See input that produces output above
% 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 &lt; 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] &lt; 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}

Admonitions​

The following "admonitions" can help highlight different elements of the page.

note

Some content with markdown syntax. Check this api.

tip

Some content with markdown syntax. Check this api.

info

Some content with markdown syntax. Check this api.

caution

Some content with markdown syntax. Check this api.

danger

Some content with markdown syntax. Check this api.

Video Content​

Single Video​

A video can be embedded as part of an admonition:

video content

The content in this guide may be helpful. Wow this is not good. But some more wrap.

Multiple Videos​

More than one video can be embedded as part of an admonition:

something cool and something nice

This content in this guide is also available in video format. We know f(x)=sin⁡(x)f(x)=\sin(x).

Watch Video Directly​

Videos can be embedded in the page for viewing outside of admonitions:

Images​

Centered image:

Block Content​

Content can be highlighted on a single line:

Single line

Or multiple lines:

Line 1

Line 2

Line 3

Material-UI​

Content/components from other frameworks can be used such as the DataGrid component from Material-UI:

Icons​

Icons can be used:

Partials​

Partials from other files can be used.

This content concerns the following: time and space complexity.

SomethingElse
O(4)O(4)O(n2)O(n^2)
O(log⁡n)O(\log n)lg⁡2\lg 2

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

Dark Mode and Light Mode Dependence​

Items can be made to appear or disappear based on light or dark mode selection (such as the image below):

Example banner