Markdown Features Showcase

This post demonstrates all supported Markdown features in the blog.

Headings

All heading levels from H1 to H6 are fully supported with beautiful typography.

Third Level Heading

Fourth Level Heading

Fifth Level Heading

Sixth Level Heading

Text Formatting

You can use bold text, italic text, or bold and italic together. You can also use strikethrough text.

Lists

Unordered Lists

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

Ordered Lists

1. First step
2. Second step
3. Third step
   1. Sub-step A
   2. Sub-step B
4. Fourth step

Task Lists

• Completed task
• Incomplete task
• Another task to do

Links

You can create inline links and also use links with titles.

External links automatically open in a new tab.

Code

Inline Code

Use inline code within your text like this: const greeting = "Hello World".

Code Blocks

Here's a JavaScript example:

// Function to calculate factorial
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5)); // Output: 120

Python example:

def fibonacci(n):
    """Generate Fibonacci sequence up to n terms"""
    fib_sequence = []
    a, b = 0, 1
    
    for _ in range(n):
        fib_sequence.append(a)
        a, b = b, a + b
    
    return fib_sequence

# Generate first 10 Fibonacci numbers
print(fibonacci(10))

TypeScript example:

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

const fetchUser = async (id: number): Promise<User> => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

Shell commands:

# Install dependencies
npm install

# Build the project
npm run build

# Start development server
npm run dev

Blockquotes

"The best way to predict the future is to invent it."

— Alan Kay

You can also nest blockquotes:

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

Tables

Here's a more complex table:

Images

Images are automatically responsive and lazy-loaded

Horizontal Rules

You can create horizontal rules with:

---

Emphasis

This is emphasized text and this is strong text.

You can also use underscores for emphasis and double underscores for strong.

Nested Content

You can combine multiple elements:

1. First Point: This demonstrates code within a list

   const example = "Code block in a list";
   

2. Second Point: Here's a table within a list:

   Column 1	Column 2
   Data 1	Data 2

3. Third Point: And a blockquote:

   Quote within a list

Advanced Features

Math (if needed in the future)

Although not currently implemented, you could add KaTeX or MathJax for mathematical expressions.

Syntax Highlighting

The code blocks support syntax highlighting for many languages:

• JavaScript/TypeScript
• Python
• Ruby
• Go
• Rust
• Java
• C/C++
• Shell/Bash
• HTML/CSS
• JSON/YAML
• And many more!

Conclusion

This showcase demonstrates the comprehensive Markdown rendering capabilities of the blog. The styling adapts beautifully to both light and dark modes, with carefully chosen typography and spacing for optimal readability.

Enjoy writing your content! 🚀