Below you can find the manual for the Markdown parser used on this site. Some functions are not yet implemented, but will be added in the future.

Markdown Help (Supported Syntax)

This page explains how to format text using the Markdown features supported on this site.

Table of Contents (Auto)

All headings like # Heading are automatically collected into a Table of Contents (desktop sidebar + mobile collapsible menu).

Headings

Use # for headings.

# Title
## Section
### Subsection
#### Smaller section

Notes:

• Your headings become HTML headings.
• They get automatic anchors and appear in the Table of Contents.

Paragraphs and Line Breaks

• Normal text becomes a paragraph.
• A blank line ends a paragraph.
• Inside a paragraph, a new line becomes a line break.

Example:

This is line one
This is line two
This is a new paragraph.

Horizontal Line

Use exactly:

text

Inline Formatting

Bold

**bold text**

bold text

Italic

*italic text*

italic text

Inline Code

`code`

code

Links

[link text](https://example.com)

link text

Notes:

• Inline formatting works inside paragraphs, list items, table cells, and blockquotes.
• The parser escapes HTML inside normal text, so <b>hello</b> will be shown as text (not rendered).

Blockquotes

Start a line with >.

> This is a quote.
> Another quote line.

This is a quote.
Another quote line.

Notes:

• A blank line ends the quote.

Lists

Unordered Lists

Use - or *:

- Item 1
- Item 2
* Item 3

• Item 1
• Item 2
• Item 3

Ordered Lists

Use 1. / 2. / etc:

1. First
2. Second
3. Third

1. First
2. Second
3. Third

Nested Lists (Indentation)

Indent nested items with spaces:

- Parent
  - Child
    - Grandchild
- Next parent

• Parent
• Child
• Grandchild
• Next parent

Multi-line List Items

A list item can continue on the next line (without starting a new bullet/number). Example:

- First line of the item
Second line of the same item
Third line still the same item
- New item

• First line of the item
  Second line of the same item
  Third line still the same item
• New item

Notes:

• A blank line keeps the list open, but the next non-empty line will not automatically continue the previous item unless it immediately follows a list item.

Tables

A table row is any line that starts and ends with |.

Simple Table

| Name | Value |
| Alice | 10 |
| Bob | 20 |

Table With Header + Alignment

Use a separator line with dashes, and optional colons:

• :--- left
• ---: right
• :---: center

| Item | Price | Note |
|:-----|------:|:----:|
| Apple | 1.20 | fresh |
| Pear  | 2.50 | ok |

Notes:

• Inline formatting works inside cells (bold/italic/code/links).
• Tables are wrapped in a horizontal scroll container for small screens.

Images (Figures) With Optional Size

Supported format:

![Caption](filename.png = 300x200)

Examples:

![My diagram](diagram.png = 600x300)
![Only width](photo.jpg = 500x)
![Only height](photo.jpg = x300)
![No size](photo.jpg = x)

Notes:

• Images are loaded from: /uploads/<course_id>/<filename>
• The text inside ![ ... ] becomes the caption under the image.
• Images include a click-to-zoom behavior (checkbox-based).

Fenced Code Blocks

Use triple backticks.

Code Block Without Language

:::code
some code here
:::

some code here

Code Block With Language Label

```php
echo "Hello";

```php
echo "Hello";

Notes:

• The website renders a styled code block.
• If you provide a language after the opening backticks, it appears as a label.
• A “Copy code” button is automatically added.

Boxes (Callouts)

You can create block boxes using:

:::info
Content...
:::

Supported box types:

• info
• success
• warning
• danger
• exercise
• rtl
• code

Example: Info Box

:::danger
This is a **danger** box with *formatting* and `inline code`.
:::

:::success
This is a **success** box with *formatting* and `inline code`.
:::

Example: Exercise Box

:::exercise
**Task:** Compute 2+2.
Write your answer below.
:::

Code Box

A :::code box outputs a code block style container and does not parse Markdown inside as normal content.

:::code
function hello() {
  return "hi";
}
:::

Notes:

• Boxes can contain multiple paragraphs, lists, quotes, tables, etc. (except code, which is treated as raw code content).

Solutions (Hidden / Toggle)

Inside any other box (like exercise) you can add a solution block:

::: exercise
Solve: **3 × 7**
:::solution
The result is **21**.
:::
:::

Behavior:

• A “Show Solution” button is created.
• Clicking toggles the visibility of the solution content.

Scientific Sketches, Diagrams, and Plots

Scientific figures with TikZ

Use a fenced block with the language tikz. TikZ is the recommended format for force diagrams, geometry, coordinate systems, derivation sketches, circuits, rays, vectors, and many other scientific illustrations:

```tikz
\begin{tikzpicture}[>=stealth]
  \draw[fill=gray!15] (-1,-0.4) rectangle (1,0.4);
ode at (0,0) {$m$};
  \draw[->, very thick] (1,0) -- (3,0) node[right] {$F$};
  \draw[->, very thick] (0,0.4) -- (0,2) node[above] {$N$};
  \draw[->, very thick] (0,-0.4) -- (0,-2) node[below] {$mg$};
nd{tikzpicture}

TikZ source is compiled in the browser to a scalable SVG image. The alias `scientific-sketch` is also accepted.
### Custom biological and scientific SVG figures
For figures requiring free-form shapes, use a fenced `svg` block. This is useful for biological processes, cell structures, apparatus sketches, and annotated scientific illustrations:
```text
```svg
<svg viewBox="0 0 600 220" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
      <path d="M0,0 L0,6 L9,3 z" fill="currentColor" />
    </marker>
  </defs>
  <circle cx="100" cy="110" r="55" fill="none" stroke="currentColor" stroke-width="3" />
  <text x="100" y="115" text-anchor="middle">Cell</text>
  <line x1="160" y1="110" x2="270" y2="110" stroke="currentColor" stroke-width="3" marker-end="url(#arrow)" />
  <rect x="290" y="65" width="130" height="90" rx="18" fill="none" stroke="currentColor" stroke-width="3" />
  <text x="355" y="115" text-anchor="middle">Protein</text>
</svg>

SVG markup is sanitized before being inserted into the page. Scripts, event handlers, and `foreignObject` content are removed.
### Mermaid flow diagrams
Use a fenced block with the language `mermaid`:
```text
```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Result]
    B -->|No| D[Try again]

Mermaid supports flowcharts, sequence diagrams, class diagrams, state diagrams, timelines, mind maps, and more.
### Data plots with Chart.js
Use a fenced block with the language `chart` (or `plot`) and provide valid JSON:
```text
```chart
{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr"],
    "datasets": [
      {
        "label": "Example series",
        "data": [12, 19, 8, 15]
      }
    ]
  },
  "options": {
    "responsive": true,
    "maintainAspectRatio": false
  }
}