Regular Heading

This is regular markdown text.

Regular markdown content.

Another Heading

More regular text. No custom components yet.

Bold text and italic text.

• List item 1
• List item 2

Main Heading (H1)

This is the main heading of the document. It should be the largest and most prominent text element on the page.

Secondary Heading (H2)

Secondary headings are used for major sections within the document. They should be noticeably smaller than H1 but still prominent.

Tertiary Heading (H3)

Third-level headings are used for subsections. They continue the visual hierarchy while remaining readable.

Fourth Level Heading (H4)

Fourth-level headings are for sub-subsections. They should maintain the hierarchy while being clearly distinct from body text.

Fifth Level Heading (H5)

Fifth-level headings are rarely used but should still maintain proper hierarchy and contrast.

Sixth Level Heading (H6)

Sixth-level headings are the smallest heading level. They should be distinct from body text but not overwhelming.

Paragraphs and Text Formatting

This is a standard paragraph with regular text. Paragraphs should have comfortable line height, appropriate font size, and proper spacing between them for optimal readability.

This is another paragraph to demonstrate paragraph spacing. Notice how there’s space between this paragraph and the previous one, which helps with reading flow and visual breathing room.

This is bold text using double asterisks. Bold text should be noticeably heavier than regular text.

This is italic text using single asterisks. Italic text should be slanted and visually distinct.

This is bold and italic text using triple asterisks. It combines both bold weight and italic styling.

This is also bold text using double underscores. It should look identical to the asterisk version.

This is also italic text using single underscores. It should look identical to the asterisk version.

This is strikethrough text using double tildes. It should show a line through the text.

This is inline code using backticks. It should use a monospace font and be visually distinct from regular text.

This paragraph contains a mix of formatting: bold text, italic text, inline code, and strikethrough text all within the same paragraph to test how they work together.

Links

Here’s a standard link (opens in a new tab) to an external website.

Here’s a link with title (opens in a new tab) that shows additional information on hover.

Here’s an internal link that links to another section on this page.

This is a reference-style link to Google (opens in a new tab) and another to GitHub (opens in a new tab).

URLs can also be automatic: https://example.com (opens in a new tab) and https://example.com (opens in a new tab)

Email addresses work too: contact@example.com and contact@example.com

Lists

Unordered Lists

• First item in unordered list
• Second item in unordered list
• Third item with nested items:
  • Nested item 1
  • Nested item 2
  • Deeply nested item:
    • Deep item 1
    • Deep item 2
• Fourth item back at root level

Alternative syntax using asterisks:

• Item one
• Item two
• Item three

Alternative syntax using plus signs:

• Item A
• Item B
• Item C

Ordered Lists

1. First item in ordered list
2. Second item in ordered list
3. Third item with nested items:
   1. Nested numbered item 1
   2. Nested numbered item 2
   3. Deeply nested:
      1. Deep numbered item 1
      2. Deep numbered item 2
4. Fourth item back at root level

Ordered list with different starting number:

5. This list starts at five
6. This is six
7. This is seven

Mixed Lists

1. Ordered item 1
2. Ordered item 2
   • Unordered nested item
   • Another unordered nested item
3. Ordered item 3
   1. Nested ordered item
   2. Another nested ordered item
      • Mixed nesting
      • More mixed nesting

Task Lists

• Completed task
• Another completed task
• Incomplete task
• Another incomplete task
• Task with bold text
• Task with italic text

Definition Lists

Term 1 : Definition for term 1. This explains what Term 1 means in detail.

Term 2 : Definition for term 2. Multiple definitions are possible. : This is a second definition for term 2.

Term 3 with formatting : Definition that contains bold and italic text formatting.

Long Term Name That Spans Multiple Words : This is a definition for a longer term name that demonstrates how definition lists handle longer terms.

Tables

Basic Table

Table with Alignment

Complex Table

Table with Formatting

Blockquotes

This is a simple blockquote. It should be visually distinct from regular paragraphs, often with different styling like indentation, border, or background color.

This is a blockquote with multiple paragraphs. The first paragraph contains some text.

This is the second paragraph within the same blockquote. Notice how both paragraphs are contained within the quote styling.

Nested blockquotes:

This is the outer blockquote.

This is a nested blockquote inside the first one.

It should be visually distinct from the outer quote.

Back to the outer blockquote level.

Blockquote with other formatting:

This blockquote contains bold text and italic text.

It can also contain inline code and links (opens in a new tab).

1. Even ordered lists

2. Can be inside blockquotes

• As well as unordered lists
• With multiple items

Code

Inline Code

Use git status to check the status of your repository.

Here’s some more inline code in the middle of a sentence.

You can also use code with backticks like npm install package-name.

Code Blocks

This is a plain code block without syntax highlighting.
It uses three backticks to create the block.
All text inside maintains its formatting and spacing.

Code Blocks with Syntax Highlighting

// JavaScript example
function greetUser(name) {
    console.log(`Hello, ${name}!`);
    return `Welcome, ${name}`;
}

const user = "John Doe";
greetUser(user);

# Python example
def calculate_area(radius):
    """Calculate the area of a circle."""
    import math
    return math.pi * radius ** 2

# Usage
circle_area = calculate_area(5)
print(f"Area: {circle_area:.2f}")

/* CSS example */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

<!-- HTML example -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Site</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#about">About</a>
        </nav>
    </header>
    <main>
        <p>This is the main content.</p>
    </main>
</body>
</html>

Images

Basic Image

Image with Link

(opens in a new tab)

Reference-style Image

Horizontal Rules

Above this line.

Below this line.

Another type of horizontal rule.

Yet another type of horizontal rule.

HTML Elements

Keyboard Input

Press Ctrl + C to copy.

Use Cmd + V on Mac to paste.

Highlighting

This text has a highlighted section in the middle.

Subscript and Superscript

The chemical formula for water is H₂O.

Einstein’s famous equation is E = mc².

Small Text

This is small text, often used for fine print or copyright notices.

Abbreviations

The WWW was invented by Tim Berners-Lee.

HTML is the standard markup language.

Citations

The Great Gatsby was written by F. Scott Fitzgerald.

According to MDN Web Docs, this is the correct usage.

Deleted and Inserted Text

This text has been deleted and this text has been inserted.

Time Element

The event happened on June 20, 2025.

Meeting scheduled for 2:30 PM today.

Details and Summary

// Even code blocks work
console.log("Hello from inside details!");

Complex Combinations

Table inside Blockquote

Here’s important data in a table format:

Metric	Q1	Q2	Q3
Revenue	$100k	$120k	$150k
Users	1,000	1,500	2,200

As you can see, we’re growing steadily each quarter.

Lists with Code and Links

1. First, install the package:

   npm install awesome-package

2. Then, configure it by visiting the documentation (opens in a new tab):

   • Read the Getting Started guide
   • Follow the setup instructions
   • Test with the provided examples

3. Finally, implement in your project:

   import { awesomeFunction } from 'awesome-package';
   awesomeFunction();

Mixed Content Block

Important Note: This blockquote contains multiple elements

Here’s a checklist of things to remember:

• Read the documentation
• Install dependencies with npm install
• Write tests
• Deploy to production

For more information, see the official guide (opens in a new tab).

# Quick start command
npm start

Special Characters and Escaping

Here are some special characters that need escaping in markdown:

*This is not italic because the asterisk is escaped*

#This is not a heading because the hash is escaped

`This is not code because the backtick is escaped`

You can also use HTML entities: © ™ ®   — –

Mathematical symbols: ± × ÷ ≠ ≤ ≥

Currency symbols: $ € £ ¥

Arrows: ← → ↑ ↓ ↔

Line Breaks

This line ends with two spaces so this line starts on a new line.

This line ends with a backslash
so this line also starts on a new line.

This line has no special ending so this text continues on the same line.

Footnotes

Here’s a sentence with a footnote¹.

Here’s another sentence with a longer footnote².

You can also use inline footnotes^[This is an inline footnote].

Testing Edge Cases

Empty Elements

Here’s a paragraph followed by an empty paragraph.

Here’s the paragraph after the empty one.

Very Long Lines

This is an extremely long line of text that should test how your typography system handles very long lines of content and whether it properly wraps or breaks at appropriate points while maintaining good readability and visual flow throughout the entire length of this unnecessarily verbose sentence that just keeps going and going without any natural breaking points to see how the system handles such edge cases.

Multiple Consecutive Elements

Bold text Immediately followed by italic Then inline code Then strikethrough

Special Cases

Text with “smart quotes” and ‘single smart quotes’.

Text with em—dashes and en–dashes and regular-hyphens.

Text with ellipses… and multiple periods…

UPPERCASE TEXT and lowercase text and MiXeD cAsE text.

Accessibility Testing

Proper Heading Hierarchy

Main Content Heading (H1)

Major Section (H2)

Subsection (H3)

Sub-subsection (H4)

Minor heading (H5)

Smallest heading (H6)

Lists for Screen Readers

Navigation items:

• Home
• About
• Services
• Contact

Steps to complete:

1. Fill out the form
2. Review your information
3. Submit the form
4. Check your email for confirmation

Descriptive Links

Instead of “click here”, use descriptive link text that explains the destination (opens in a new tab).

Learn more about web accessibility guidelines and best practices (opens in a new tab).

This kitchen sink document tests every major markdown element and HTML feature to ensure your typography system handles all common use cases correctly.