Welcome to My Blog

This is an example blog post to demonstrate the blog’s design and functionality. The blog is built with Astro and designed to match the visual style of azzam.xyz.

Typography and Headings

Here are all heading levels available:

Heading Level 3 (H3)

Heading Level 4 (H4)

Heading Level 5 (H5)

Heading Level 6 (H6)

Text Formatting

Here are various text formatting options:

Bold text for emphasis
Italic text for subtle emphasis
Bold and italic combined
~~Strikethrough text~~ for deleted content
Inline code for technical terms
Regular paragraph text with normal formatting

You can also combine formats like bold with code inside or italic with links.

Lists

Unordered Lists (Bullets)

First bullet point
Second bullet point
Third bullet point with bold text
Fourth bullet point with italic text
Fifth bullet point with inline code

Nested Unordered Lists

Parent item 1
- Nested item 1.1
- Nested item 1.2
  - Deeply nested item 1.2.1
Parent item 2
- Nested item 2.1

Ordered Lists (Numbered)

First numbered item
Second numbered item
Third numbered item
Fourth numbered item

Nested Ordered Lists

First parent item
1. First nested item
2. Second nested item
Second parent item
1. Another nested item

Mixed Lists

Numbered item
- Bullet under numbered
- Another bullet
Another numbered item
- More bullets
  - Even deeper nesting

Code Blocks

JavaScript/TypeScript

interface BlogPost {
  title: string;
  description: string;
  date: Date;
  tags: string[];
  coverImage?: string;
}

const post: BlogPost = {
  title: "Welcome to My Blog",
  description: "An example post",
  date: new Date(),
  tags: ["example", "welcome"]
};

console.log(post);

Python

def calculate_reading_time(content: str) -> int:
    """Calculate reading time in minutes."""
    word_count = len(content.split())
    return max(1, word_count // 200)

content = "This is a sample blog post content."
reading_time = calculate_reading_time(content)
print(f"Reading time: {reading_time} minutes")

CSS

.prose {
  font-family: "Source Serif 4", serif;
  font-size: 1.0625rem;
  line-height: 1.82;
  color: var(--color-text-muted);
}

.prose h2 {
  font-family: "Inter", sans-serif;
  font-size: 2em;
  letter-spacing: -0.025em;
}

Shell/Bash

npm install
npm run dev
npm run build

Blockquotes

Here’s a simple blockquote:

The only way to do great work is to love what you do.

And here’s a longer blockquote with attribution:

The longer I live, the more I realize that I am never wrong about anything, and that all the pains I have so humbly taken to verify my notions have only wasted my time!

— George Bernard Shaw

Nested blockquotes:

First level quote

Second level nested quote

Back to first level

Links

Here are different link styles:

Images

Regular Image

Image with Title

Linked Image

Horizontal Rules

You can use horizontal rules to separate sections:

Above is a horizontal rule created with three dashes.

Tables

Here’s a simple table:

Feature	Status	Notes
Typography	✅	Editorial font pairing
Code blocks	✅	Syntax highlighting
Images	✅	Responsive support
Quotes	✅	Premium styling
Lists	✅	Nested support

Complex Table

Column 1	Column 2	Column 3	Column 4
Bold	Italic	`Code`	Link
Regular text	More text	Even more	Final column
Left	Center	Right	Justified

Task Lists (Checkboxes)

Mixed Content Example

Here’s a paragraph with bold, italic, code, and a link.

Code Example in Context

When working with Astro, you might write code like this:

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

Then you can reference it in text using getStaticPaths() inline.

Quote in Context

As the saying goes:

Code is like humor. When you have to explain it, it’s bad.

This applies to both writing code and writing about code.

Emphasis Combinations

Bold only
Italic only
Bold and italic
Code only
Bold with code
Italic with code
Bold italic with code
Link
Bold link
Italic link

Special Characters

Escaped asterisk: *
Escaped underscore: _
Escaped backtick: `
Escaped bracket: [
Escaped parenthesis: (

Long Paragraph Example

This is a longer paragraph to demonstrate how the typography handles extended text. The line height and letter spacing are carefully tuned to provide optimal reading comfort for long-form content. The serif font choice adds a premium, editorial feel that’s perfect for essays and thoughtful articles. The spacing between paragraphs creates a natural reading rhythm that doesn’t feel cramped or overwhelming.

Conclusion

This comprehensive example demonstrates all the markdown styling features available in the blog:

✅ All heading levels (H1-H6)
✅ Text formatting (bold, italic, strikethrough, code)
✅ Unordered and ordered lists (with nesting)
✅ Code blocks with syntax highlighting
✅ Blockquotes with attribution
✅ Links (regular and reference style)
✅ Images (regular, with titles, linked)
✅ Horizontal rules
✅ Tables
✅ Task lists
✅ Mixed content combinations

Enjoy exploring all the styling options!