Markdown Render Test Page

This is a comprehensive markdown test file designed to verify layout, syntax highlighting, and typographic elements.

Text Formatting

Here is a quick overview of basic inline styling:

• Bold text using double asterisks.
• Italic text using single asterisks.
• Bold and italic text combined.
• Strikethrough text to show deletions.
• Inline code blocks for short programmatic snippets.

---

Project Structure

Below is a typical setup for a modern web application:

my-tma-project/
├── public/
│   ├── favicon.ico
│   └── images/
├── src/
│   ├── components/
│   │   ├── Button.tsx
│   │   └── Header.tsx
│   ├── pages/
│   │   ├── index.tsx
│   │   └── blog/
│   └── styles/
│       └── globals.css
├── package.json
└── README.md

---

Code Blocks

Bash Deployment Script

#!/bin/bash
# Production build script for Next.js

echo "🔄 Fetching latest updates..."
git pull origin main

echo "📦 Installing dependencies..."
npm install --frozen-lockfile

echo "🛠️ Generating production build..."
npm run build

echo "🚀 Restarting application process..."
pm2 restart my-app

TypeScript Component Example

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

export const ActionButton: React.FC<ButtonProps> = ({ label, onClick, variant = 'primary' }) => {
  return (
    <button 
      className={`btn btn-${variant}`} 
      onClick={onClick}
    >
      {label}
    </button>
  );
};

---

Lists & Tables

Tasks & Features

1. Configure SEO meta descriptions
2. Implement Critical CSS optimization
3. Deploy to production environment

• Setup project repository
• Optimize image assets
• Configure Telegram bot polling

Performance Benchmarks

---

Blockquotes & Callouts

Important Note: Advanced styling workflows like Next.js automatically manage critical CSS parsing to maximize Core Web Vitals performance without requiring manual separation.