Typography & Style Showcase

Heading Level 2

Voluptate mollit consectetur deserunt exercitation ullamco fugiat nulla pariatur. Culpa ipsum consectetur excepteur dolore do labore consequat labore.

Heading Level 3

Aute quis excepteur et consequat eu fugiat aliqua. Aliquip est pariatur deserunt tempor eu officia ad aute aliquip. Non quis velit irure velit aute aliqua laborum officia quis culpa.

Heading Level 4

Laboris quis Lorem mollit est laboris ullamco anim. Consectetur ipsum amet deserunt non. Tempor sint quis voluptate magna consequat veniam.

Inline Text Styles

This paragraph shows bold text, italic text, strikethrough, inline code, and a link to GitHub. You can also have text with underline and highlighted content.

Blockquote

A great quote can illuminate an entire argument. It sits apart from the body text, drawing the reader’s eye with its distinct styling — a colored left border, subtle background, and italic cadence.

— Someone Wise

Code

Inline Code

Use Array.prototype.map() to transform arrays, or await Promise.all([...]) for concurrent operations.

Code Block

interface BlogConfig {
  site: {
    title: string;
    description: string;
    author: string;
    url: string;
  };
  features: {
    lightAndDarkMode: boolean;
    showArchives: boolean;
    search: "pagefind" | false;
  };
}

const config: BlogConfig = {
  site: {
    title: "Lanchai's Blog",
    description: "Life is a random walk.",
    author: "biscuitbc",
    url: "https://lanchai.site",
  },
  features: {
    lightAndDarkMode: true,
    showArchives: true,
    search: "pagefind",
  },
};

Lists

Unordered List

• Performance — Static generation with Astro, zero client JS by default
• Typography — Tailwind Typography plugin with custom overrides
• Dark Mode — System-aware with manual toggle, no flash on load
• Search — Pagefind-powered full-text search, works offline

Ordered List

1. Write content in Markdown or MDX
2. Astro compiles to static HTML at build time
3. Deploy to any static host (GitHub Pages, Vercel, Cloudflare)
4. Enjoy fast load times and minimal maintenance

Table

Image (if you add one)

That covers all the major typographic elements. The post page and the post list should both reflect the refined styling.