Markdown Features Test Page

January 20, 2025•6 min read•by ar0x

markdowndocumentationdemoredteamforensics

Markdown Features Test
- Headings
H1 Heading

Markdown Features Test

This document tests all Markdown features to ensure proper rendering.

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Text Formatting

This is bold text and this is also bold.

This is italic text and this is also italic.

This is bold and italic and this too.

This is ~~strikethrough text~~.

You can also use inline code within text.

Lists

Unordered Lists

First item
Second item
Third item
- Nested item 1
- Nested item 2
  - Deeply nested item
Fourth item

Alternative syntax
Works the same
- With nesting

Ordered Lists

First item
Second item
Third item
1. Nested item 1
2. Nested item 2
Fourth item

Task Lists

Completed task
Another completed task
Incomplete task
Another incomplete task

Links

This is a link

Link with title

https://www.example.com

Reference-style link

Images

Alt text for image

Smaller image

Blockquotes

This is a blockquote. It can span multiple lines.

This is a blockquote with bold text and italic text.

Blockquote with heading

You can have multiple paragraphs in blockquotes.

And lists

Like this

Nested blockquote:

This is nested

And this is even deeper

Code Blocks

Inline Code

Use console.log() to print to console.

Fenced Code Blocks

function greet(name) {
    console.log(`Hello, ${name}!`);
    return true;
}

const result = greet("World");

def calculate_fibonacci(n):
    if n <= 1:
        return n
    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)

# Generate first 10 numbers
for i in range(10):
    print(calculate_fibonacci(i))

interface User {
    id: number;
    name: string;
    email: string;
}

class UserManager {
    private users: User[] = [];
    
    addUser(user: User): void {
        this.users.push(user);
    }
    
    getUser(id: number): User | undefined {
        return this.users.find(u => u.id === id);
    }
}

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

{
  "name": "test-project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "next": "^14.0.0"
  }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

SELECT u.name, u.email, COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.created_at > '2024-01-01'
GROUP BY u.id
ORDER BY order_count DESC;

Tables

Feature	Supported	Notes
Headers	✅	H1-H6
Lists	✅	Ordered & Unordered
Code Blocks	✅	Syntax highlighting
Tables	✅	With alignment
Images	✅	Local & Remote

Table with Alignment

Left Aligned	Center Aligned	Right Aligned
Row 1	Data	100
Row 2	Data	200
Row 3	Data	300

Horizontal Rules

Escaping Characters

* Not italic *

_ Not italic _

# Not a heading

[Not a link](url)

HTML Elements

You can use HTML tags within Markdown.

This content is hidden until you click the summary.

console.log("Hidden code block!");

Footnotes

Here's a sentence with a footnote.¹

Another sentence with a different footnote.²

Definitions

First Term : This is the definition of the first term.

Second Term : This is the definition of the second term. : This term can have multiple definitions.

Mathematical Expressions

Inline math: $E = mc^2$

Block math:

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

$$ f(x) = \sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!}(x-a)^n $$

Emoji

:smile: :rocket: :heart: :fire: :star:

Or using Unicode: 😀 🚀 ❤️ 🔥 ⭐

Keyboard Keys

Press Ctrl + C to copy.

Press Cmd + V to paste.

Abbreviations

The HTML specification is maintained by the W3C.

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

Alerts/Callouts

Note This is a note callout.

Warning This is a warning callout.

Important This is an important callout.

Mixed Content Example

Here's a complex example combining multiple features:

Real-World Code Example

Let's implement a user authentication system:

import { hash, compare } from 'bcrypt';
import { sign, verify } from 'jsonwebtoken';

interface User {
    id: string;
    email: string;
    passwordHash: string;
}

class AuthService {
    private readonly SECRET_KEY = process.env.JWT_SECRET!;
    
    async hashPassword(password: string): Promise<string> {
        return await hash(password, 10);
    }
    
    async verifyPassword(password: string, hash: string): Promise<boolean> {
        return await compare(password, hash);
    }
    
    generateToken(userId: string): string {
        return sign({ userId }, this.SECRET_KEY, { expiresIn: '24h' });
    }
    
    verifyToken(token: string): { userId: string } {
        return verify(token, this.SECRET_KEY) as { userId: string };
    }
}

Key Features:

✅ Password hashing with bcrypt
✅ JWT token generation
✅ Type-safe with TypeScript
✅ Environment variable configuration

Security Tip: Always use environment variables for secrets and never commit them to version control!

Performance Comparison

Method	Time (ms)	Memory (MB)	Best For
Hash Map	0.1	50	Fast lookups
Binary Search	1.2	10	Sorted data
Linear Search	10.5	5	Small datasets

Quick Command Reference

# Start development
npm run dev

# Run tests
npm test

# Build production
npm run build && npm start

Conclusion

This page demonstrates all major Markdown features. Use it to test your Markdown renderer and ensure everything displays correctly!

Resources

Last updated: January 20, 2025

Questions? Feel free to reach out at [email protected] or on Twitter.

This is the first footnote. ↩
This is the second footnote with more details. ↩