Markdown Features Showcase

Welcome to this comprehensive showcase of our industry-standard Markdown rendering features! This article demonstrates GitHub-style admonitions and Mac-style code blocks that elevate your technical content.

GitHub-style Admonitions

Admonitions are special callout boxes that draw attention to important information. Let's explore all five types:

Mac-style Code Blocks

Our code blocks now feature beautiful macOS window chrome with traffic lights and professional JetBrains Mono font.

TypeScript Example

// Angular 21 Signals - Modern State Management
import { Component, signal, computed, effect } from '@angular/core';

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `
    <div class="profile">
      <h2>{{ fullName() }}</h2>
      <p>{{ user().email }}</p>
    </div>
  `
})
export class UserProfileComponent {
  // Signal-based reactive state
  user = signal<User>({
    id: '1',
    name: 'John Doe',
    email: 'john@example.com'
  });

  // Computed signal - automatically updates
  fullName = computed(() => {
    const currentUser = this.user();
    return `${currentUser.name} (${currentUser.id})`;
  });

  constructor() {
    // Side effects that run when signals change
    effect(() => {
      console.log('User changed:', this.user());
    });
  }
}

JavaScript Modern Patterns

// Async/await with error handling
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw error;
  }
}

// Array methods chaining
const users = [
  { name: 'Alice', age: 28 },
  { name: 'Bob', age: 32 },
  { name: 'Charlie', age: 25 }
];

const adultNames = users
  .filter(user => user.age >= 18)
  .map(user => user.name)
  .sort();

console.log(adultNames); // ['Alice', 'Bob', 'Charlie']

CSS Modern Techniques

/* Glassmorphism with backdrop-filter */
.glass-card {
  background: color-mix(in srgb, white 70%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* CSS Grid with auto-fit */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

/* Custom properties for theming */
:root {
  --primary-color: #2196f3;
  --surface-color: #ffffff;
  --text-color: #212121;
}

html.dark {
  --surface-color: #121212;
  --text-color: #ffffff;
}

Python Code Example

# Python async/await pattern
import asyncio
from typing import List, Dict

async def fetch_data(url: str) -> Dict:
    """Asynchronously fetch data from a URL."""
    # Simulated async operation
    await asyncio.sleep(1)
    return {"url": url, "status": "success"}

async def main():
    urls = [
        "https://api.example.com/users",
        "https://api.example.com/posts",
        "https://api.example.com/comments"
    ]

    # Concurrent execution
    tasks = [fetch_data(url) for url in urls]
    results = await asyncio.gather(*tasks)

    for result in results:
        print(f"✓ {result['url']}: {result['status']}")

if __name__ == "__main__":
    asyncio.run(main())

Bash/Shell Commands

# Angular CLI commands
ng new my-app --standalone --routing --style=scss

# Install dependencies
bun add @angular/material @angular/cdk

# Run development server
bun start

# Build for production
ng build --configuration production

# Run tests
ng test --watch=false --code-coverage

JSON Configuration

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "lib": ["ES2022", "DOM"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Combining Features

Here's how to effectively use admonitions with code examples:

// ✅ Good - With error handling
async function saveUser(user: User): Promise<void> {
  try {
    await api.post('/users', user);
    console.log('User saved successfully');
  } catch (error) {
    console.error('Failed to save user:', error);
    throw new Error('Save operation failed');
  }
}

// ❌ Bad - Without error handling
async function saveUserBad(user: User): Promise<void> {
  await api.post('/users', user); // Unhandled promise rejection!
}

Markdown Best Practices

Conclusion

These enhanced Markdown features bring your technical documentation to life with:

✨ Professional Code Blocks - Mac-style window chrome with JetBrains Mono font
🎯 Clear Callouts - GitHub-style admonitions for better information hierarchy
🎨 Beautiful Design - Material Design 3 theming with dark mode support
⚡ Better UX - Improved readability and visual organization

Happy writing! 🚀