Markdown Reference

This is the markdown syntax reference. For layout examples, see Layouts. For interactive components, see Components.

Navigation

• Getting Started - Quick start guide
• Content Overview - Main documentation hub
• Creating Lessons - Step-by-step workflow

Common Gotcha

Important: There is a bug that prevents page rendering when content has a "curly apostrophe": ‘

Always use straight apostrophes (') instead of curly ones (').

Headings

Headings are created with # symbols. The number of #s determines the level:

Syntax

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Rendered Example

Example Heading 1

Example Heading 2

Example Heading 3

Example Heading 4

Example Heading 5

Example Heading 6

Best practice: Use one H1 per page (the title), then H2s for sections, H3s for subsections, etc.

Text Formatting

Syntax

This is **bold text**.
This is *italic text*.
This is ***bold and italic***.
This is ~~strikethrough~~.

Rendered Example

This is bold text. This is italic text. This is bold and italic. This is strikethrough.

Links

Syntax

[Link text](https://example.com)
[Link with title](https://example.com "Hover text")
[Internal link](/about)

Rendered Example

Link to Wikipedia Link with title Internal link to overview

Images

Syntax

![Alt text](/path/to/image.jpg)
![Alt text with title](/path/to/image.jpg "Image title")

Rendered Example

Remember: Paths start with / from the static directory (no "static" in the path).

Lists

Unordered Lists

Syntax

- First item
- Second item
- Third item
  - Nested item
  - Another nested item
- Fourth item

Rendered Example

• First item
• Second item
• Third item
  • Nested item
  • Another nested item
• Fourth item

Ordered Lists

Syntax

1. First step
2. Second step
3. Third step
   1. Sub-step A
   2. Sub-step B
4. Fourth step

Rendered Example

1. First step
2. Second step
3. Third step
   1. Sub-step A
   2. Sub-step B
4. Fourth step

Blockquotes

Syntax

> This is a blockquote.
> It can span multiple lines.
>
> It can also have multiple paragraphs.

Rendered Example

This is a blockquote. It can span multiple lines.

It can also have multiple paragraphs.

Code

Inline Code

Syntax

Use `code` for inline code snippets.

Rendered Example

Use code for inline code snippets. For example, const x = 42 is JavaScript.

You can also specify language: console.log('Hello') or print("Hello")

Code Blocks

Syntax

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
```

Rendered Examples

Python:

def fibonacci(n: int) -> int:
    """Calculate the nth Fibonacci number."""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Example usage
print(fibonacci(10))  # Output: 55

JavaScript:

export const fibonacci = (n) => {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

console.log(fibonacci(10)) // Output: 55

C++ (Arduino):

const int LED_PIN = 13;

void setup() {
  pinMode(LED_PIN, OUTPUT);
}

void loop() {
  digitalWrite(LED_PIN, HIGH);
  delay(500);  // Wait half a second
  digitalWrite(LED_PIN, LOW);
  delay(500);
}

Bash:

#!/bin/bash
echo "Building project..."
bun run build
echo "Build complete!"

See Shiki language support for all supported languages.

Tables

Syntax

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Row 1    | Data     | More     |
| Row 2    | Data     | More     |

Rendered Example

Math

Math rendering uses MathJax.

Inline Math

Syntax

The equation $E = mc^2$ is Einstein's famous formula.

Rendered Example

The equation is Einstein's famous formula. A qubit state is .

Block Math

Syntax

$$
|\psi\rangle = \alpha|0\rangle + \beta|1\rangle
$$

Rendered Example

Complex Math Example

Schrödinger equation:

Colored Math

You can colorize equations:

Horizontal Rules

Syntax

---

Rendered Example

Content above the line.

Content below the line.

HTML in Markdown

You can use HTML when you need more control over styling. Important: Separate HTML tags from markdown content with empty lines.

Example: Text Alignment

Example: (Ugly) Colored Box

Example: Responsive Grid

Tailwind Resources

This site uses Tailwind CSS classes for styling. Learn more:

• Tailwind CSS Documentation
• Skeleton UI Components (some don't behave well inside markdown due to limitations with the renderer and conflicting special characters)

Note: CSS is processed by PostCSS in this project.

Images with Captions

Example

<figure>
  <img src="/path/to/image.jpg" alt="Description" />
  <figcaption class="text-sm text-gray-500 text-center mt-2">
    Figure 1: Caption text here
  </figcaption>
</figure>