This post demonstrates every markdown element to test typography styles.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

This is a regular paragraph with some text. 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.

This is another paragraph to show spacing between paragraphs. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Text Formatting

This text contains bold text and italic text and bold italic text.

You can also use underscores for bold and underscores for italic.

This has strikethrough text for deleted content.

Here is some inline code within a sentence.

This sentence has highlighted text using the mark tag.

Here is small text for fine print.

Chemical formula: H₂O and mathematical notation: x² + y² = z²

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

The WHO was founded in 1948.

Links

Here is a basic link to another site.

Here is a link with title - hover to see the title.

You can also use automatic links: https://example.com

Lists

Unordered List

• First item
• Second item
• Third item with a longer description that might wrap to multiple lines on smaller screens
• Fourth item

Nested Unordered List

• First level item
  • Second level item
  • Another second level
    • Third level item
    • Another third level
  • Back to second level
• Back to first level

Ordered List

1. First item
2. Second item
3. Third item
4. Fourth item

Nested Ordered List

1. First item
   1. Sub-item one
   2. Sub-item two
2. Second item
   1. Another sub-item
      1. Deep nested item
      2. Another deep item
   2. Back up a level
3. Third item

Mixed Lists

1. Ordered item one
   • Unordered sub-item
   • Another unordered
2. Ordered item two
   • Mixed list item
     1. Numbered deep item
     2. Another numbered

Task List

• Completed task
• Another completed task
• Incomplete task
• Another incomplete task

Blockquotes

This is a simple blockquote. It can contain multiple sentences and will be styled with a left border.

This is a longer blockquote that spans multiple lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

It can also contain multiple paragraphs within the same blockquote.

Nested Blockquotes

First level quote

Nested quote inside

Even deeper nesting

Back to first level

Blockquote with Other Elements

Blockquote with a heading

This blockquote contains bold text and a list:

• Item one
• Item two

Code

Inline Code

Use the printf() function to print output. The config.yml file contains settings.

Code Block (Fenced)

This is a plain code block
without syntax highlighting

Code Block with Syntax Highlighting

function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

// Call the function
greet('World');

def calculate_sum(numbers):
    """Calculate the sum of a list of numbers."""
    total = 0
    for num in numbers:
        total += num
    return total

# Example usage
result = calculate_sum([1, 2, 3, 4, 5])
print(f"The sum is: {result}")

.prose {
  color: var(--color-gray-700);
  line-height: 1.75;
  font-size: 1.125rem;
}

.prose h1 {
  font-size: 2.25rem;
  font-weight: 700;
}

# Install dependencies
npm install

# Run the development server
npm run dev

# Build for production
npm run build

Horizontal Rules

Content above the rule.

Content below the rule.

Another way to create a horizontal rule.

Tables

Simple Table

Table with Alignment

Table with Formatting

Images

Image with Caption

Definition Lists

Term One

This is the definition for term one. It explains what the term means.

Term Two

This is the definition for term two. Definitions can be longer and contain more detailed explanations.

Term Three

First definition for term three.

Second definition for the same term.

Footnotes

Here is a sentence with a footnote¹.

Another sentence with a different footnote².

HTML Elements

Details/Summary (Collapsible)

Abbreviation

The API documentation is available online.

Emoji (if supported)

Some common emoji: :smile: :heart: :rocket: :fire:

Line Breaks

This line has two spaces at the end to create a line break without a new paragraph.

This is a new paragraph after a blank line.

Escaping Characters

Use backslash to escape special characters:

*This text is surrounded by literal asterisks*

# This is not a heading

[This is not a link]

Conclusion

This style guide covers all the major markdown elements. Use it to verify that your typography styles are working correctly across all content types.