📝 Complete Markdown Example

Welcome to the ultimate Markdown example — this shows nearly every formatting and content element you can display on a Markdown-based page.

---

🧭 Front Matter

Front matter (the section above) defines metadata about this page:

• title, description, date, tags
• Can also include things like category, author, slug, image, etc.

---

🧱 Headings

Markdown supports six levels of headings:

H1 — Main Title

H2 — Section Title

H3 — Subsection

H4 — Smaller Heading

H5 — Tiny Heading

H6 — Smallest Heading

---

✍️ Text Formatting

Bold text
Italic text
Bold and italic
Strikethrough
Inline code sample

Blockquote: Markdown makes quoting easy and elegant.

---

📋 Lists

Ordered List

1. First item
2. Second item
   1. Nested item
   2. Another nested item
3. Third item

Unordered List

• Bullet item
• Another bullet
  • Nested bullet
  • Deeper level

Task List

• Write Markdown
• Add metadata
• Publish to site

---

💡 Code Blocks

Inline Code

Use npm run dev to start your project.

Block Code

# Terminal example
git clone https://github.com/example/project.git
cd project
npm install

Code with Language Highlighting

.container {
  display: grid;
  gap: 1rem;
  background-color: var(--bg-color);
}

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Lee"));

---

🖼️ Images

Basic Image

Image with Caption

---

🔗 Links

• External link
• Internal link
• https://openai.com (autolink)

---

📊 Tables

Feature	Description	Supported
Tables	Organize data	✅
Code	Syntax highlight	✅
Emojis	😄 🎨 🚀	✅

---

💬 Callouts / Admonitions (if your framework supports it)

[!NOTE] This is a note box.

[!TIP] Use callouts to highlight tips or information.

[!WARNING] Be cautious with changes in production.

---

🧮 Math (with MathJax or KaTeX)

If enabled: $$ E = mc^2 $$

Inline example: The area is given by $A = \pi r^2$.

---

🎨 Horizontal Rule

Use --- or *** to create a separator line.

---

🧩 Embeds

You can embed YouTube, tweets, or iframes in some frameworks:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>

---

🏷️ Tagging and Metadata Display

Tags: #markdown #frontend #demo

---

🧠 Summary

This Markdown file demonstrates:

• YAML Front Matter metadata
• Rich formatting
• Code, tables, callouts, embeds, math
• Compatible with Astro, Hugo, Jekyll, and Next.js MDX

---

Last updated: {{ date }}