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

**Bold text**
 
_Italic text_
 
**_Bold and italic text_**
 
~~Strikethrough text~~
 
`Inline code`
 
**Bold text with _nested italic_**

[OpenAI](https://www.openai.com)
 
[Example](https://example.com "Example title")
 
<https://example.com>
 
<someone@example.com>
 
Reference-style link: [Markdown Guide][guide]
 
[guide]: https://www.markdownguide.org/

[card](https://github.com)

This is the first paragraph.
 
This is the second paragraph.
 
This line ends with two spaces.  
This line starts on a new line.

> This is a blockquote.
 
> This is a multi-line blockquote.
>
> It can contain multiple paragraphs.
 
> You can also nest blockquotes.
>
> > This is a nested blockquote.

- Apple
- Banana
- Orange
- Frontend
  - HTML
  - CSS
- Backend
  - Python
  - Go

1. First item
2. Second item
3. Third item
4. Fourth item
5. Prepare the environment.
   1. Install dependencies.
   2. Configure the project.
   3. Run the tests.
6. Build the application.
7. Deploy the application.

- [x] Create the project
- [x] Install dependencies
- [x] Write documentation
- [ ] Add unit tests
- [ ] Deploy to production

`console.log("Hello, world!");`

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
 
const message = greet("Alice");
console.log(message);
```

function greet(name) {
  return `Hello, ${name}!`;
}
 
const message = greet("Alice");
console.log(message);

```python
def greet(name):
    return f"Hello, {name}!"
 
print(greet("Alice"))
```

def greet(name):
    return f"Hello, {name}!"
 
print(greet("Alice"))

```json
{
  "name": "Alice",
  "age": 30,
  "active": true,
  "skills": ["Python", "JavaScript", "Markdown"]
}
```

{
  "name": "Alice",
  "age": 30,
  "active": true,
  "skills": ["Python", "JavaScript", "Markdown"]
}

```bash
npm install
npm run build
npm test
```

npm install
npm run build
npm test

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

```css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

```sql
SELECT
    id,
    name,
    email
FROM users
WHERE active = true
ORDER BY name ASC;
```

SELECT
    id,
    name,
    email
FROM users
WHERE active = true
ORDER BY name ASC;

```
This is a plain code block.
 
    Indentation is preserved.
    Line breaks are preserved.
 
No syntax highlighting is specified.
```

---
---

| Name  | Age | Role      |
| ----- | --: | --------- |
| Alice |  30 | Developer |
| Bob   |  25 | Designer  |
| Carol |  35 | Manager   |

| Left | Center | Right |
| :--- | :----: | ----: |
| A    |   B    |     C |
| D    |   E    |     F |
| G    |   H    |     I |

\*Not italic\*
 
\*\*Not bold\*\*
 
\# Not a heading
 
\[Not a link\]
 
\`Not inline code\`
 
Escaped characters:
 
\* \_ \# \+ \- \. \! \[ \] \( \) \{ \} \> \| \~

This is <u>underlined text</u>.
 
This is <mark>highlighted text</mark>.
 
This is <small>small text</small>.
 
H<sub>2</sub>O
 
E = mc<sup>2</sup>
 
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
 
Press <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste.

<div align="center">
 
This paragraph is centered using HTML.
 
</div>

<details>
<summary>Click to expand</summary>
 
This content is hidden until the section is expanded.
 
- Item one
- Item two
- Item three
 
</details>

Markdown supports footnotes in many implementations.[^1]
 
You can also use named footnotes.[^note]
 
[^1]: This is the first footnote.
 
[^note]: This is a named footnote.

Term
: Definition of the term.
 
Markdown
: A lightweight markup language.

> [!NOTE]
> This is a note.
 
> [!TIP]
> This is a useful tip.
 
> [!IMPORTANT]
> This information is important.
 
> [!WARNING]
> Be careful when changing production settings.
 
> [!CAUTION]
> This operation cannot easily be undone.

$E = mc^2$
 
$a^2 + b^2 = c^2$

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

```mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Done]
    B -->|No| D[Debug]
    D --> B
```

```mermaid
sequenceDiagram
    participant User
    participant Server
    participant Database
 
    User->>Server: Send request
    Server->>Database: Query data
    Database-->>Server: Return data
    Server-->>User: Send response
```

```mermaid
classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
 
    class Admin {
        +deleteUser()
    }
 
    User <|-- Admin
```

<!--
This is an HTML comment.
 
It will not normally be displayed
when the Markdown is rendered.
-->
 
Visible text after the comment.

**Bold text containing _italic text_.**
 
**Bold text containing `inline code`.**
 
**Bold text containing ~~strikethrough~~.**
 
> A quote containing **bold text**, _italic text_, and `inline code`.
 
- **Bold list item**
- _Italic list item_
- [Linked list item](https://example.com)
- `Code list item`

[Normal link](https://example.com)
 
**[Bold link](https://example.com)**
 
_[Italic link](https://example.com)_
 
**_[Bold italic link](https://example.com)_**
 
[Link with title](https://example.com "This is a title")

![Basic Sample Image](/images/blog/list_of_markdown_expressions/sample.jpg)

![Sample with Title](/images/blog/list_of_markdown_expressions/sample.jpg "Photograph of a stunning landscape")

[![Clickable Image](/images/blog/list_of_markdown_expressions/sample.jpg)](/images/blog/list_of_markdown_expressions/sample.jpg)

<figure>
  <img src="/images/blog/list_of_markdown_expressions/sample.jpg" alt="Figure Sample" />
  <figcaption>Figure 1: Landscape photograph rendered with a custom figure caption.</figcaption>
</figure>

![Reference Style Example][sample-ref-image]
 
[sample-ref-image]: /images/blog/list_of_markdown_expressions/sample.jpg "Reference Image Title"

<img src="/images/blog/list_of_markdown_expressions/sample.jpg" alt="Small sized image" width="320" />

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0;">
  <img src="/images/blog/list_of_markdown_expressions/sample.jpg" alt="Grid item 1" style="margin: 0; width: 100%; height: auto;" />
  <img src="/images/blog/list_of_markdown_expressions/sample.jpg" alt="Grid item 2" style="margin: 0; width: 100%; height: auto;" />
</div>