Typography & Content Showcase: All Elements Demo

Caption: This is an image at the very beginning of the post with an italic caption This post demonstrates all available content elements and typographic styles. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading Level 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This text is bold and this text is italic. You can also use bold and italic together.

Heading Level 3

Here’s some inline code: const greeting = "Hello World" within a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading Level 4

Text can include links to external sites or internal links. You can also use strikethrough text for corrections.

Heading Level 5

Sometimes you need superscript² or subscript₂ for mathematical expressions like H₂O or E=mc².

Heading Level 6

This is the smallest heading level. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lists Showcase

Unordered List

• First level item
• Another first level item
  • Second level nested item
  • Another nested item
    • Third level nesting
    • Deep nesting example
  • Back to second level
• Back to first level

Ordered List

1. First step in the process
2. Second step with details
   1. Sub-step 2.1
   2. Sub-step 2.2
      1. Even deeper nesting
      2. Another deep item
   3. Sub-step 2.3
3. Third main step
4. Fourth and final step

Task List

• Completed task
• Another completed item
• Pending task
• Future improvement

Blockquotes

This is a simple blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blockquotes are great for highlighting important information or quotes.

Note: You can use formatting inside blockquotes too.

This is a multi-paragraph blockquote with italic text and even lists:

• First item

• Second item

And this is a nested blockquote inside a blockquote.

Code Blocks

JavaScript Example

// A more complex code example
class BlogPost {
  constructor(title, content, author) {
    this.title = title;
    this.content = content;
    this.author = author;
    this.createdAt = new Date();
  }

  publish() {
    console.log(`Publishing: ${this.title} by ${this.author}`);
    return {
      status: 'published',
      timestamp: this.createdAt
    };
  }
}

const post = new BlogPost(
  'Typography Showcase',
  'Lorem ipsum...',
  'John Doe'
);

CSS Example

/* Custom styles example */
.blog-post {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.blog-post h2 {
  color: #333;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

Bash/Shell Example

# Installation commands
npm install astro
npm run dev

# Build for production
npm run build
npm run preview

Tables

Simple Table

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Aligned Table

Left Aligned	Center Aligned	Right Aligned	Numbers
Left text	Center text	Right text	123.45
Lorem ipsum	dolor sit amet	consectetur	67.89
adipiscing	elit sed	do eiusmod	1,234.56

Complex Table with Formatting

Feature	Description	Status	Priority
Typography	Various text styles	✅ Complete	High
Images	<img> support	✅ Complete	High
Tables	Markdown tables	✅ Complete	Medium
Code	Syntax highlighting	⏳ In Progress	Low

Caption: This demonstrates an image placed in the middle of the article

Horizontal Rules

Text before the horizontal rule.

---

Text after the horizontal rule. Lorem ipsum dolor sit amet.

---

Another style of horizontal rule.

---

And yet another style.

Special Content

Definition Lists (if supported)

Term 1 : Definition for term 1 : Another definition for term 1

Term 2 : Definition for term 2

Keyboard Input

Press Ctrl + C to copy and Ctrl + V to paste.

Abbreviations

The W3C maintains web standards. HTML stands for HyperText Markup Language.

Mathematical Expressions

Inline math: $e^{i\pi} + 1 = 0$

Block math:

$$ \frac{n!}{k!(n-k)!} = \binom{n}{k} $$

Mixed Content Example

Here’s a paragraph that combines multiple elements. We can have bold text with italics, inline code, and links. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1. An ordered list item with bold text
2. Another item with a code snippet

   With a blockquote inside the list

3. And continuing with regular text

Nested Elements Stress Test

Heading in a Blockquote

With a paragraph and a list:

1. First item with bold
2. Second item with italic

// Code block in a blockquote
const nested = true;

Long-form Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Multiple Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum. Donec auctor a lacus in tincidunt. Proin blandit, tortor at ultrices tincidunt, elit sapien facilisis lectus.

Nec ullamcorper sit amet risus nullam eget felis. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi.

Tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate mi sit amet mauris commodo quis imperdiet massa.

Final Elements

Details/Summary (if supported)

Click to expand this section

This is hidden content that appears when you click the summary. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Can contain any elements
• Including lists
• And more paragraphs

Footnotes

Here’s a sentence with a footnote¹. And here’s another one².

Caption: Final image demonstrating placement at the end of the article

Conclusion

This post has demonstrated all major typographic elements and content types available in Markdown. From basic text formatting to complex nested structures, tables, code blocks, and images at various positions, you can now see how each element renders in your blog’s design.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Thank you for reviewing this comprehensive typography showcase!

Footnotes

1. This is the first footnote with some explanatory text. ↩

2. This is the second footnote with a link. ↩