Syntax Highlighting Test

This post is used to verify the code block rendering capabilities of our blog engine. We'll test various languages and nested structures.

TypeScript & React

Testing complex TypeScript types and React components:

interface User {
  id: number;
  name: T;
  role: 'admin' | 'user';
}

const Welcome: React.FC<{ username: string }> = ({ username }) => {
  const [count, setCount] = useState(0);
  
  return (
    <div className="p-4">
      <h1>Hello, {username}!</h1>
      <button onClick={() => setCount(prev => prev + 1)}>
        Count: {count}
      </button>
    </div>
  );
};

CSS & Variables

Testing modern CSS features and variables:

:root {
  --primary-color: #3b82f6;
  --bg-gradient: linear-gradient(135deg, #1e293b, #0f172a);
}

.blog-card {
  display: flex;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--primary-color);
  transition: transform 0.3s ease-in-out;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

Shell & Terminal

Testing command line snippets:

# Install dependencies using pnpm
pnpm install lucide-react framer-motion

# Start the development server
pnpm dev

# Build for production
pnpm run build

SQL Queries

Testing database interaction snippets:

SELECT posts.title, authors.name, COUNT(comments.id) as comment_count
FROM posts
JOIN authors ON posts.author_id = authors.id
LEFT JOIN comments ON comments.post_id = posts.id
WHERE posts.published = true
GROUP BY posts.id, authors.id
ORDER BY comment_count DESC
LIMIT 10;

Inline code test: Use const x = 42; to verify inline code styling.

Conclusion

If the code blocks above look like plain text without colors, we should implement a library like Prism.js or Shiki.