---
title: Markdown Syntax Testsuite
date: 2025-03-14
tags:
    - markdown
    - wip
summary: Just a simple test file, testing various features
published: true
featured: false
image: /assets/MD.png
thumbnail: /assets/MD.png
---

# Markdown Testsuite 📝

:::warning WIP

This article is still a work in progress.

:::

This document showcases Markdown capabilities with various extensions. It's intended as a reference for creating rich, interactive documentation.

## Basic Formatting

Plain text is rendered as-is. You can create **bold text**, _italic text_, and **_bold italic text_**.

You can also use ~~strikethrough~~ to indicate removed content.

Use `inline code` for technical references.

## Lists

### Unordered Lists

- First item
- Second item
    - Nested item 2.1
    - Nested item 2.2
        - Deeply nested item
- Third item

### Ordered Lists

1. First step
2. Second step
    1. Substep 2.1
    2. Substep 2.2
3. Third step

### Task Lists

- [x] Create project structure
- [x] Implement core functionality
- [ ] Write comprehensive tests
- [ ] Deploy to production
    - [ ] Prepare deployment scripts
    - [x] Configure CI/CD pipeline

## Links and Images

[Visit my website](https://nextlegacy.de)

[Link with title](https://nextlegacy.de "Mert Can Serezli's Website")

Reference-style links: [my website][website-ref]

[website-ref]: https://nextlegacy.de "NextLegacy Website"

<!-- ![Sample image](/images/sample.webp) -->

## Code Blocks

Inline: `const greet = (name) => console.log(`Hello, ${name}!`);`

### JavaScript with syntax highlighting

```javascript
// Regular JavaScript example
function calculateTotal(items) {
    return items
        .filter((item) => item.price > 0)
        .map((item) => item.price * item.quantity)
        .reduce((total, price) => total + price, 0);
}

const total = calculateTotal([
    { name: "Keyboard", price: 89.99, quantity: 1 },
    { name: "Mouse", price: 49.99, quantity: 1 },
    { name: "Monitor", price: 199.99, quantity: 2 }
]);

console.log(`Total: $${total.toFixed(2)}`); // Total: $539.96
```

### TypeScript with Twoslash annotations

```typescript twoslash
// TypeScript example with type annotations
interface Product {
    name: string;
    price: number;
    quantity: number;
}

function calculateDiscount(products: Product[], discountRate: number): number {
    //                                  ^?
    const total = products.reduce((sum, product) => {
        return sum + product.price * product.quantity;
    }, 0);

    return total * discountRate;
}

const products = [
    { name: "Keyboard", price: 89.99, quantity: 1 },
    { name: "Mouse", price: 49.99, quantity: 1 }
];

const discount = calculateDiscount(products, 0.1);
//    ^?
console.log(`Discount: $${discount.toFixed(2)}`);
```

### Code with diff highlighting

```javascript
function sendWelcomeEmail(user) {
    const subject = "Welcome to our service"; // [!code --]
    const subject = `Welcome to our service, ${user.name}!`; // [!code ++]

    const body = "Thanks for signing up."; // [!code --]
    const body = `
    <h1>Welcome aboard, ${user.name}!</h1>
    <p>We're excited to have you join our community.</p>
    <p>Your account is now active.</p>
  `; // [!code ++]

    return sendEmail(user.email, subject, body);
}
```

### Code with highlighted lines

```typescript
// Authentication middleware
type NextFunction = (err?: any) => void;
type Request = { headers: { authorization: string }; user?: { id: string; roles: string[] } };
type Response = { status: (code: number) => { json: (data: any) => void } };
const jwt = { verify: (token: string, secret: string) => ({ id: "123", roles: ["user"] }) };
const process = { env: { JWT_SECRET: "supersecret" } };
export const authMiddleware = async (req: Request, res: Response, next: NextFunction) => {
    try {
        // Extract token from Authorization header
        const authHeader = req.headers.authorization;
        if (!authHeader?.startsWith("Bearer ")) {
            // [!code highlight]
            return res.status(401).json({ message: "Authentication token required" });
        }

        const token = authHeader.split(" ")[1];
        if (!token) {
            // [!code highlight]
            return res.status(401).json({ message: "Invalid authentication token" });
        }

        // Verify JWT token
        const decoded = jwt.verify(token, process.env.JWT_SECRET); // [!code focus]

        // Attach user information to request
        req.user = decoded;

        next();
    } catch (error) {
        return res.status(401).json({ message: "Invalid or expired token" });
    }
};
```

## Tables

### Simple Table

| Name    | Type    | Default | Description                 |
| ------- | ------- | ------- | --------------------------- |
| id      | string  | -       | Unique identifier           |
| title   | string  | ''      | Display title               |
| visible | boolean | true    | Whether the item is visible |

### Alignment Control

| Left-aligned | Center-aligned | Right-aligned |
| :----------- | :------------: | ------------: |
| Text         |      Text      |       Numbers |
| Left         |     Center     |         12345 |
| Alignment    |       is       |         67890 |
| Simple       |  with colons   | in header row |

## Blockquotes

> This is a basic blockquote.
> It can span multiple lines.

Nested blockquotes:

> Outer blockquote
>
> > Nested blockquote
> >
> > > Deeper nested blockquote
>
> Back to the outer blockquote.

Blockquote with other elements:

> ### Heading in a blockquote
>
> - List item in blockquote
> - Another list item
>
> ```javascript
> // Code in blockquote
> console.log("Hello from blockquote!");
> ```

## LaTeX Mathematical Expressions

### Inline Math

Euler's identity: $e^{i\pi} + 1 = 0$

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

### Block Math

$$
\begin{aligned}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
\nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{aligned}
$$

### Complex Mathematical Expressions

$$
\begin{align*}
    \mathbf{A} \cdot \mathbf{B} &=
    \begin{bmatrix}
        a_{11} & a_{12} & \cdots & a_{1n} \\
        a_{21} & a_{22} & \cdots & a_{2n} \\
        \vdots & \vdots & \ddots & \vdots \\
        a_{m1} & a_{m2} & \cdots & a_{mn}
    \end{bmatrix}
    \begin{bmatrix}
        b_{11} & b_{12} & \cdots & b_{1p} \\
        b_{21} & b_{22} & \cdots & b_{2p} \\
        \vdots & \vdots & \ddots & \vdots \\
        b_{n1} & b_{n2} & \cdots & b_{np}
    \end{bmatrix} \\
    &=
    \begin{bmatrix}
        \displaystyle\sum_{k=1}^{n} a_{1k}b_{k1} & \displaystyle\sum_{k=1}^{n} a_{1k}b_{k2} & \cdots & \displaystyle\sum_{k=1}^{n} a_{1k}b_{kp} \\[1.2em]
        \displaystyle\sum_{k=1}^{n} a_{2k}b_{k1} & \displaystyle\sum_{k=1}^{n} a_{2k}b_{k2} & \cdots & \displaystyle\sum_{k=1}^{n} a_{2k}b_{kp} \\[1.2em]
        \vdots & \vdots & \ddots & \vdots \\[1.2em]
        \displaystyle\sum_{k=1}^{n} a_{mk}b_{k1} & \displaystyle\sum_{k=1}^{n} a_{mk}b_{k2} & \cdots & \displaystyle\sum_{k=1}^{n} a_{mk}b_{kp}
    \end{bmatrix}
\end{align*}
$$

$$
\begin{aligned}
P(x) &= a_0 + a_1 x + a_2 x^2 + \ldots + a_n x^n \\
&= \sum_{i=0}^{n} a_i x^i
\end{aligned}
$$

## Mermaid Diagrams

### Flowchart

```mermaid
flowchart TD
    A[Start] --> B{User authenticated?}
    B -->|Yes| C[Load dashboard]
    B -->|No| D[Show login form]
    C --> E[Display user data]
    D --> F[Validate credentials]
    F -->|Valid| C
    F -->|Invalid| G[Show error message]
    G --> D
```

### Sequence Diagram

```mermaid
sequenceDiagram
    participant User
    participant Frontend
    participant API
    participant Database

    User->>Frontend: Submit login form
    Frontend->>API: POST /auth/login
    API->>Database: Query user credentials
    Database-->>API: Return user data
    API-->>Frontend: Return JWT token
    Frontend-->>User: Show dashboard

    Note over Frontend,API: Authentication successful

    User->>Frontend: Request protected resource
    Frontend->>API: GET /api/resource with JWT
    API->>API: Validate JWT
    API->>Database: Query resource data
    Database-->>API: Return resource data
    API-->>Frontend: Return resource
    Frontend-->>User: Display resource
```

### Class Diagram

```mermaid
classDiagram
    class User {
        +String id
        +String name
        +String email
        +String[] roles
        +authenticate()
        +hasPermission(string)
    }

    class Product {
        +String id
        +String name
        +Number price
        +String description
        +applyDiscount(percent)
        +isAvailable()
    }

    class Order {
        +String id
        +User customer
        +Product[] items
        +Date orderDate
        +Number total
        +calculateTotal()
        +addItem(Product)
        +removeItem(Product)
    }

    User "1" --> "*" Order: places
    Order "*" --> "*" Product: contains
```

### Entity Relationship Diagram

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string id
        string name
        string email
        string address
    }
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        string id
        date created_at
        string status
        number total_amount
    }
    ORDER_ITEM {
        string order_id
        string product_id
        number quantity
        number price
    }
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"
    PRODUCT {
        string id
        string name
        number price
        string description
        number stock
    }
```

### State Diagram

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review : Submit for review
    Review --> Draft : Request changes
    Review --> Approved : Accept
    Review --> Rejected : Reject
    Approved --> Published : Publish
    Rejected --> Draft : Revise
    Published --> [*]
```

## Admonitions

:::info
This is an informational note. Use it for general information and context.
:::

:::tip
This is a tip. It provides helpful advice and suggestions.
:::

:::warning
This is a warning. Pay attention to avoid potential issues.
:::

:::danger
This is a danger alert. Critical information about errors or problems.
:::

:::note Important Note
You can also customize the admonition title.
:::

:::info Nested Content
Admonitions can contain other markdown elements:

- Lists
- **Formatted text**
- Code blocks

```javascript
console.log("Code inside admonition");
```

And even tables:

| Key | Value |
| --- | ----- |
| A   | One   |
| B   | Two   |

:::

## HTML Elements

<div style="background-color: var(--background-100); padding: 1.5rem; border-radius: 0.75rem; margin: 2rem 0;">
  <h3>Custom HTML Container</h3>
  <p>This is a custom HTML container with styling applied.</p>
  <ul>
    <li>You can use HTML for more complex layouts</li>
    <li>When markdown doesn't provide enough control</li>
  </ul>
</div>

### Details/Summary Elements

<details>
  <summary>Click to expand implementation details</summary>
  
  <h4>Implementation Notes</h4>
  
  <p>This section contains implementation details that are hidden by default to keep the document clean.</p>
  
  <div>

```typescript
type User = {
    id: string;
    email: string;
    passwordHash: string;
    roles: string[];
};
type AuthResponse = {
    user: User;
    token: string;
};
type Request = { body: { email: string; password: string } };
const AuthenticationError = Error;
const bcrypt = { compare: (a: string, b: string) => true };
const findUserByEmail = async (email: string) => {
    // Database query to find user by email
    return { id: "123", email, passwordHash: "hashedpassword", roles: ["user"] };
};
const generateJWT = (user: { id: string; email: string; roles: string[] }) => "jwt.token";
const sanitizeUser = (user: User) => {
    const { passwordHash, ...sanitizedUser } = user;
    return sanitizedUser;
};
const authenticateUser = async (email: string, password: string) => {
    try {
        const user = await findUserByEmail(email);

        if (!user) {
            throw new Error("User not found");
        }

        const isPasswordValid = await bcrypt.compare(password, user.passwordHash);

        if (!isPasswordValid) {
            throw new Error("Invalid password");
        }

        const token = generateJWT({
            id: user.id,
            email: user.email,
            roles: user.roles
        });

        return {
            user: sanitizeUser(user),
            token
        };
    } catch (error: any) {
        throw new AuthenticationError(error.message);
    }
};
```

</div>

</details>

### Progress Bars

<label for="task-progress">Project Progress (75%)</label>
<progress id="task-progress" value="75" max="100" style="width: 100%;">75%</progress>

### Keyboard Keys

Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> to open the command palette.

### Responsive Columns with Flexbox

<div style="display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 2rem 0;">
<div style="flex: 1; min-width: 280px;">
  <h4>Feature Highlights</h4>
  <ul>
    <li>Responsive design</li>
    <li>Cross-platform compatibility</li>
    <li>High performance</li>
  </ul>
</div>
<div style="flex: 1; min-width: 280px;">
  <h4>Technical Specifications</h4>
  <ul>
    <li>Built with TypeScript</li>
    <li>Svelte 5 components</li>
    <li>Tailwind CSS v4</li>
  </ul>
</div>
<div style="flex: 1; min-width: 280px;">
  <h4>Performance Metrics</h4>
  <ul>
    <li>98/100 PageSpeed score</li>
    <li>0.8s First Contentful Paint</li>
    <li>1.2s Time to Interactive</li>
  </ul>
</div>
</div>

## Advanced Features

### Definition Lists

Term 1
: Definition 1

Svelte
: A modern JavaScript framework that compiles at build time
: Known for its simple syntax and high performance

React
: A JavaScript library for building user interfaces
: Uses a virtual DOM for efficient rendering

### Footnotes

This statement requires citation[^1]. You can also use inline footnotes^[This is an inline footnote with *formatting*].

[^1]: Here is the footnote content with a [link](https://nextlegacy.de).

### Abbreviations

The HTML specification is maintained by the W3C.

_[HTML]: Hyper Text Markup Language
_[W3C]: World Wide Web Consortium

### Ruby Annotations (Furigana)

<ruby>
日本語 <rp>(</rp><rt>にほんご</rt><rp>)</rp>
</ruby>

### Embedded Audio

<!-- <audio controls>
<source src="/media/example.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio> -->

### Embedded Video

<!-- <video width="100%" height="auto" controls>
<source src="/media/example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> -->

### Custom Containers with SVG Icons

<div style="display: flex; align-items: flex-start; gap: 1rem; background-color: var(--primary-50); border-left: 4px solid var(--primary-500); padding: 1rem; border-radius: 0.5rem; margin: 1.5rem 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--primary-500);"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<div>
  <h4 style="margin-top: 0;">Important Information</h4>
  <p style="margin-bottom: 0;">This is a custom information container with an SVG icon.</p>
</div>
</div>

## Credits and References

This document showcases Markdown capabilities with various extensions. It's intended as a reference for creating rich, interactive documentation.

- [Markdown Guide](https://www.markdownguide.org/)
- [GitHub Flavored Markdown](https://github.github.com/gfm/)
- [LaTeX Mathematics](https://en.wikibooks.org/wiki/LaTeX/Mathematics)
- [Mermaid Diagram Syntax](https://mermaid-js.github.io/mermaid/#/)