Skip to content

Documentation Gallery

This page contains a collection of various elements that can be used in the documentation.

Text

See the Material Theme documentation for formatting syntax.

Text can be deleted and replacement text added. This can also be combined into onea single operation. Highlighting is also possible and comments can be added inline.

Formatting can also be applied to blocks by putting the opening and closing tags on separate lines and adding new lines between the tags and the content.

Additionally, we can add footnotes1 inline thanks to the markdown extension2.

Here is a BibTeX citation: 1.

Tables

Material theme supports sorting of tables.

Method Description
GET Fetch resource
PUT Update resource
DELETE Delete resource

Lists

There are several types of lists that can be used in the documentation.

Defnintion Lists

Example defininition list:

**Lorem ipsum dolor sit amet**
:   Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
    tellus non sem sollicitudin, quis rutrum leo facilisis.

**Cras arcu libero**
:   Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
    ut eros sed sapien ullamcorper consequat. Nunc ligula ante.

    Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
    Nam vulputate tincidunt fringilla.
    Nullam dignissim ultrices urna non auctor.

Rendered:

Lorem ipsum dolor sit amet
Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus tellus non sem sollicitudin, quis rutrum leo facilisis.
Cras arcu libero

Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin ut eros sed sapien ullamcorper consequat. Nunc ligula ante.

Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis. Nam vulputate tincidunt fringilla. Nullam dignissim ultrices urna non auctor.

Task Lists

Example task list:

- [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
- [ ] Vestibulum convallis sit amet nisi a tincidunt
    * [x] In hac habitasse platea dictumst
    * [x] In scelerisque nibh non dolor mollis congue sed et metus
    * [ ] Praesent sed risus massa
- [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

Rendered:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Vestibulum convallis sit amet nisi a tincidunt
    • In hac habitasse platea dictumst
    • In scelerisque nibh non dolor mollis congue sed et metus
    • Praesent sed risus massa
  • Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

Icons

Icons can be added using the following syntax: :simple-github:, :simple-reddit:, :hugging::

, , 🤗

Material Icon Search

Images

Basic images have no lightbox or caption. Note that the example here use lazy loading of images which is supported by the Material theme.

![Eleanor AI Logo](../images/logo.webp){ loading=lazy }

Eleanor AI Logo

Example of a lightbox image:

![Service Map](../images/service_map.webp){class=on-glb}

Service Map

Captioned Lightbox Image

Example of a lightbox image with a caption:

<figure markdown="span">
  ![Service Map](/images/service_map.webp){class=on-glb loading=lazy}
  <figcaption>This is a lazy loaded lightbox image with a caption</figcaption>
</figure>
Service Map
This is a lazy loaded lightbox image with a caption

Math

Mathmatical formulas are rendered using MathJax.

Example block formula for the softmax function:

\[\text{softmax}(x)_i = \frac{e^{x_i}}{\sum_{j=1}^{n} e^{x_j}}\]

Example inline formula can use this syntax: \(\frac{1}{2}\), here I have a fraction.

Diagrams

Mermaid diagrams can be rendered in the documentation. The following example is a flowchart:

graph LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];

Code Blocks

Code block hilighting is provided by Pygments in the material theme.

Pygments has a list of lexers supported by the library. Refere to the short name in the documentation to use the correct lexer.

Below is a code block is using the Python lexer, has a title, line numbers, and highlights lines 2 and 3.

```python title="My Python Code Example" linenums="1" hl_lines="2 3"

# Code goes here ...

```

The rendered code block is shown below:

My Python Code Example
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import functools
import warnings
from typing import Any, Callable, Optional, Tuple, TypeVar, Union, cast, overload

# Define a generic type variable for the callable (function or class)
C = TypeVar("C", bound=Callable[..., Any])

@overload
def deprecated(func: C) -> C:
    pass

@overload
def deprecated(
    *,
    old: Optional[str] = None,
    new: Optional[str] = None,
    since: Optional[Tuple[int, int, int]] = None,
    remove: Optional[Tuple[int, int, int]] = None,
) -> Callable[[C], C]:
    pass

Inline highlighting can be done with the following syntax:

text ``#!python lambda x: x**2`` text

The rendered version looks like this: lambda x: x**2.

Admonitions

Admonitions can be used to highlight important information.

Note

Usage example for note:

!!! note "optional title"
content...

Abstract

Usage example for abstract:

!!! abstract "optional title"
content...

Info

Usage example for info:

!!! info "optional title"
content...

Tip

Usage example for tip:

!!! tip "optional title"
content...

Success

Usage example for success:

!!! success "optional title"
content...

Question

Usage example for question:

!!! question "optional title"
content...

Warning

Usage example for warning:

!!! warning "optional title"
content...

Failure

Usage example for failure:

!!! failure "optional title"
content...

Danger

Usage example for danger:

!!! danger "optional title"
content...

Bug

Usage example for bug:

!!! bug "optional title"
content...

Example

Usage example for example:

!!! example "optional title"
content...

Quote

Usage example for quote:

!!! quote "optional title"
content...
This is collapsable

Usage example:

??? note "optional title"
content...

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Floating inline note

Usage example:

!!! info inline end "optional title"
content...

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  1. Chi-Min Chan, Weize Chen, Yusheng Su, Jianxuan Yu, Wei Xue, Shanghang Zhang, Jie Fu, and Zhiyuan Liu. Chateval: towards better llm-based evaluators through multi-agent debate. 2023. URL: https://arxiv.org/abs/2308.07201, arXiv:2308.07201. ↩↩

  2. This is the second footnote content ↩