## Headings

### My Title { #server-sent-events-sse }

### Setext Style
Heading Level 1
===============
Heading Level 2
---------------

### ATX Style
# Heading Level 1
## Heading Level 2
### Heading Level 3
#### Heading Level 4
##### Heading Level 5

This is a paragraph. It contains multiple sentences to demonstrate how paragraphs work in Markdown.

Soft line break (just press Enter):
This is the next line.

Hard line break (use two spaces at the end of the line):  
This is the next line.

*Italics* using single asterisks.  
_Italics_ using single underscores.

**Bold** using double asterisks.  
__Bold__ using double underscores.

***Bold and Italics*** using triple asterisks.  
___Bold and Italics___ using triple underscores.

> This is a blockquote.
> > Nested blockquote.

### Ordered List

1. First item
2. Second item
3. Third item

### Unordered List

- First item
- Second item
- Third item

### Nested List

- Parent item
  - Child item
    - Grandchild item

### Task List

- [x] Completed task
- [ ] Incomplete task

### Inline Code

Use `inline code` for short snippets.

### Indented Code Block

    def hello_world():
        print("Hello, world!")

### Fenced Code Block

```python
def hello_world():
    print("Hello, world!")
```

### File Snippet Include

```markdown
{* ../demo/dollar-escape.md ln[1:24] hl[9:11,22] *}
```

Single rule:

---

Double rule:

---
---

### Inline Links

[Visit Google](https://www.google.com)

### Reference-Style Links

[Visit Google][google]

[google]: https://www.google.com

### Autolinks



### Relative Links
[Flat Land](../books/flat-land/chapter-01.md)

[Home](/)

[Static Build (Outer Link)](../static-build)

### Inline Image

![A cute cat](https://cataas.com/cat?width=300&height=300)

### Reference-Style Image

![Another cute cat][image]

[image]: https://cataas.com/cat/cute?width=300&height=300

This is bold and this is italic.

~~This text is strikethrough.~~

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1    | Data     | Data     |
| Row 2    | Data     | Data     |

Term  
: Definition

The HTML abbreviation is HTML. It stands for *HyperText Markup Language*.

*[HTML]: HyperText Markup Language

E = mc^2^  
H~2~O

==Highlighted text==

{++Inserted text++}  
{--Deleted text--}

:smile: :+1: :heart:

[TOC]

### Custom Heading {#custom-id}

This is red text.

### Video



### Audio



### PDF (iframe)

### Inline Math

$E = mc^2$

### Block Math

$$
\int_a^b f(x) dx = F(b) - F(a)
$$

### Escaping Dollar Signs

\$5 should render as $5 (not math).

\\$ should render as \\$.

\\\$ should render as \\\$.

"Curly quotes"  
-- En-dash  
--- Em-dash

> [!info] Header
> This is an informational callout inside the header. It can contain multiple paragraphs, lists, and other markdown elements.
> 
> It can even contain markdown elements such as **bold**, *italics*
> `inline code` and blocks of code.
> ```python
> def hello():
>     return "Hello, world!"
> ```


> [!warning] Rotate your keys every 90 days.

> [!success] Build completed successfully.

> [!error] Production credentials should never be committed.
> If you accidentally commit secrets, use `git filter-repo` to scrub them from your git history and rotate the compromised credentials immediately.

> [!bug] This parser edge case was fixed with a regression test.

> [!example] Use `hl[9:11,22]` to highlight selected source lines.

> [!faq]- Can callouts be nested? Click to find out!
> > [!todo]- Yes. You can nest infinitely
> > > [!example]- This is a nested callout with code!
> > > ```python
> > > def nested_callout():
> > >     return "This is a nested callout with code!"
> > > ```


> [!cite]- "Documentation is a gift to the future."
> > [!note] Good Documentation elevates everyone.
> > [!note] Bad Documentation is worse than no documentation.

Click to expand

Hidden content here.

Press Ctrl + C to copy.

| Roses are red  
| Violets are blue

This is a citation [@doe2025].

\pagebreak

\*Not italicized\*

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("World"));

Hello, World!

`hello`{.highlight}

/* custom.css in the folder */
span.highlight {
    background-color: #fff831;
    padding: 0 4px;
    border-radius: 3px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
}