MDWOCAO.js Demo

# 🚀 MDWOCAO.js V24 Showcase

Welcome to the **Ultimate Demo**. This document demonstrates every single feature of the parser.

[TOC]

---

## 1. Typography & Formatting

**Bold Text**, *Italic Text*, ~~Strikethrough~~.
We also support ==Highlighted Text==, H~2~O (Subscript), and X^2^ (Superscript).

Keys: Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Esc</kbd> to explode properly.

---

## 2. GitHub Alerts (Callouts)

> [!NOTE] 
> **Standard Note**: Useful for general information.
> Supports multiline content.

> [!TIP] **Quick Tip**: You can use single-line syntax like this!

> [!WARNING]
> **Warning**: Watch out for edge cases.

> [!IMPORTANT]
> **Important**: This library is lightweight (< 10KB).

> [!CAUTION]
> **Caution**: Do not divide by zero.

---

## 3. Math Formulas (KaTeX)

**Inline Math**:
The mass-energy equivalence is described by $E=mc^2$.
Euler's identity: $e^{i\pi} + 1 = 0$.

**Block Math**:
A Gaussian Integral:
$$
\int_{-\infty}^{\infty} e^{-x^2} \,dx = \sqrt{\pi}
$$

A Complex Matrix:
$$
M = \begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$

---

## 4. Code Blocks & Guarding

MDWOCAO protects content inside code blocks. **Math (`$`)** and **Emoji (::)** are ignored here.

### JavaScript (Line Numbers + Highlight)
```javascript {linenos=on hl_lines=[2,5]}
function calculatePrice(base) {
    // The $ sign here is NOT math
    const $taxRate = 0.08; 
    let emoji = ":smile:"; // This is NOT an emoji
    
    return base * (1 + $taxRate);
}
```

### Bash (No Highlight)
```bash
# Testing robustness
echo "Downloading... 100%"
export PATH=$PATH:/usr/bin
```

---

## 5. Custom Attributes (CSS & Classes)

We fixed the HEX color parsing bug! You can now use detailed styles.

### 🎨 Custom Colored Box {.demo-box style="background-color: #f0f9ff; border-color: #bae7ff;"}
This div has a custom class `.demo-box` and inline styles with **HEX Colors** (`#f0f9ff`).
**ID Check**: This element should NOT have a weird ID.

### Gradient Text {.text-center .rainbow-text}
This is a centered header with a custom "rainbow-text" class.

---

## 6. Emojis

---

## 7. Lists & Complexity

### Nested Lists
1. First Item
2. Second Item
    - Sub-item A
    - Sub-item B with math: $x+y=z$
    - Sub-item C with emoji :star:
3. Third Item

### Task List
- [x] Implement Core Parser
- [x] Fix HEX Color Bug
- [x] Add Scroll Sync
- [ ] Take a break :coffee:

### Definition List
Markdown : A lightweight markup language.
MDWOCAO : A fast JS parser for Markdown.

---

## 8. Tables

| Name | Role | Power Level | Status |
| :--- | :---: | :---: | ---: |
| **Alice** | Admin | 9000+ | :check: |
| **Bob** | User | $10^2$ | :warning: |
| **Eve** | *Hacker* | $\infty$ | :x: |

---

## 9. Images & Links

This is a [Link to Google](https://google.com).

![Markdown Logo](https://markdown-here.com/img/icon256.png)

---

## 10. Footnotes

Here is a reference to a footnote[^1].
And another one[^2].

[^1]: Footnotes are placed at the bottom automatically.
[^2]: They support **formatting** too.