# My first document

This is **bold text** and this is *italic text*.

## Code example

Here's some TypeScript:

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`
}

console.log(greet("World"))

As you type, the status bar at the bottom shows:
- Line count
- Word count
- Character count
- Save status

```typescript src/scripts/status-bar.ts
export function updateStatusBar(content: string) {
  const lines = content.split("\n").length
  const words = content.trim().split(/\s+/).filter(Boolean).length
  const chars = content.length

  document.getElementById("line-count")!.textContent = `${lines} lines`
  document.getElementById("word-count")!.textContent = `${words} words`
  document.getElementById("char-count")!.textContent = `${chars} chars`
}

```python
def factorial(n: int) -> int:
    if n <= 1:
        return 1
    return n * factorial(n - 1)

print(factorial(5))  # Output: 120
```

```mermaid
graph TD
    A[User opens CodeInk] --> B{First time?}
    B -->|Yes| C[Create new document]
    B -->|No| D[Load existing document]
    C --> E[Show example content]
    D --> E
    E --> F[User writes Markdown]
    F --> G[Auto-save to IndexedDB]
```

```mermaid
sequenceDiagram
    participant User
    participant Editor
    participant Preview
    participant IndexedDB

    User->>Editor: Type Markdown
    Editor->>Preview: Update content
    Preview->>Preview: Render HTML
    Editor->>IndexedDB: Auto-save after 1s
    IndexedDB-->>Editor: Confirm save
```

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

$$
\begin{pmatrix}
1 & 2 \\
3 & 4
\end{pmatrix}
\times
\begin{pmatrix}
5 & 6 \\
7 & 8
\end{pmatrix}
=
\begin{pmatrix}
19 & 22 \\
43 & 50
\end{pmatrix}
$$