Hello World

Nov 1, 2026

A comprehensive document testing virtually every common Markdown feature, extension, formatting element, and rendering edge case.

1. Introduction

A good Markdown renderer should handle everything from simple paragraphs and inline formatting to deeply nested lists, complex tables, syntax-highlighted code blocks, mathematical expressions, embedded media, and special characters. It should also preserve whitespace where necessary, avoid unexpected layout shifts, and ensure that content remains readable on screens of different sizes.

This document intentionally combines a wide variety of Markdown elements to expose potential rendering issues. Some sections are deliberately repetitive because consistency is just as important as correctness. Pay particular attention to paragraph spacing, heading hierarchy, line wrapping, horizontal overflow, image scaling, code block scrolling, table responsiveness, and special character handling.

2. Typography and Inline Formatting

This paragraph contains bold text, italic text, bold italic text, strikethrough text, and some inline code. It also contains a regular hyperlink, an automatic link such as https://example.com, and an email address such as hello@example.com.

You can also combine formatting: bold text containing inline code, italic text containing a link, and strikethrough containing bold text.

Here is a paragraph containing many different formatting elements in succession: bold, italic, bold italic, strikethrough, code, link, and normal text.

2.1 Special Characters

• Ampersand: &
• Less than: <
• Greater than: >
• Double quotes: “Hello”
• Single quotes: ‘Hello’
• Apostrophe: don’t
• Em dash: —
• En dash: –
• Ellipsis: …
• Copyright: ©
• Registered: ®
• Trademark: ™
• Currency: € £ ¥ $
• Arrows: ← ↑ → ↓ ↔ ⇒
• Greek: α β γ δ ε λ π σ Ω
• Accents: á é í ó ú ü ñ ç ø å

Escaped Markdown characters:

*not italic*

_not italic_

`not code`

# not a heading

3. Long Paragraph Stress Test

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. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit.

Vestibulum nec erat eu nulla rhoncus fringilla. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit agna, endrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum. Donec in velit vel ipsum auctor pulvinar. Vestibulum iaculis lacinia est. Proin dictum elementum velit.

This paragraph is intentionally longer than a typical blog paragraph and should wrap across multiple lines on desktop and mobile. Its purpose is to test whether the content container has an appropriate maximum width, whether text remains readable, and whether words wrap correctly without overflowing the viewport. It should also help reveal whether your typography system applies consistent line heights, font sizes, letter spacing, and paragraph margins. Ideally, the resulting layout should feel comfortable to read rather than looking like a dense wall of text.

4. Heading Hierarchy

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Headings should have visually distinct sizes and appropriate vertical spacing.

5. Lists

5.1 Unordered List

• First-level item
• Another first-level item
  • Second-level nested item
  • Another nested item
    • Third-level nested item
    • Another third-level item
      • Fourth-level nested item
• Final first-level item

5.2 Ordered List

1. First step
2. Second step
3. Third step
   1. Nested step one
   2. Nested step two
      1. Deeply nested step
      2. Another deeply nested step
4. Fourth step

5.3 Task List

• Create a Markdown document
• Add headings and paragraphs
• Include tables and code blocks
• Test mobile responsiveness
• Verify image loading
• Check mathematical rendering
• Validate accessibility

5.4 Mixed Lists

1. Planning
   • Define the content structure.
   • Identify the required components.
2. Implementation
   • Build the Markdown parser.
   • Configure syntax highlighting.
   • Add image support.
3. Testing
   • Verify all formatting.
   • Check responsive layouts.

6. Blockquotes

This is a simple blockquote.

It contains multiple paragraphs to test spacing and alignment.

A Heading Inside a Blockquote

Blockquotes can contain other Markdown elements, including bold text, italic text, inline code, and lists.

• First quoted list item
• Second quoted list item

This is a nested blockquote.

This is a third-level nested blockquote.

7. Links

• Example website
• OpenAI
• Markdown Guide
• GitHub
• Link with title
• https://www.wikipedia.org/
• mailto:hello@example.com

Reference-style links:

Documentation

Search Engine

8. Images

8.1 Standard Image

Caption: A landscape image used to test image rendering, scaling, and alignment.

8.2 Another Image

Caption: A second image to test vertical spacing between media elements.

8.3 Linked Image

8.4 HTML Image

9. Tables

9.1 Basic Table

9.2 Text Alignment

9.3 Complex Content Table

9.4 Long Content Table

10. Code Blocks

10.1 Plain Text

This is a plain text code block.
    Indentation should be preserved.
        Nested indentation should also be preserved.
Special characters: < > & " ' / \

10.2 JavaScript

function calculateTotal(price, quantity) {
    if (price < 0 || quantity < 0) {
        throw new Error("Values cannot be negative");
    }

    const total = price * quantity;

    return {
        price,
        quantity,
        total,
        formatted: new Intl.NumberFormat("en-US", {
            style: "currency",
            currency: "USD"
        }).format(total)
    };
}

const result = calculateTotal(19.99, 5);

console.log(result);

10.3 Python

from dataclasses import dataclass
from typing import List

@dataclass
class Article:
    title: str
    author: str
    tags: List[str]

    def summary(self) -> str:
        return f"{self.title} by {self.author}"

article = Article(
    title="Markdown Rendering",
    author="Test Author",
    tags=["markdown", "testing", "web"]
)

print(article.summary())

10.4 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Test</title>
</head>
<body>
    <main>
        <h1>Hello, Markdown!</h1>
        <p>This is an HTML example.</p>
    </main>
</body>
</html>

10.5 CSS

:root {
    --background: #ffffff;
    --foreground: #222222;
    --accent: #6366f1;
    --spacing: 1rem;
}

.article {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing);
    color: var(--foreground);
    background: var(--background);
}

.article h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
}

10.6 SQL

SELECT
    users.name,
    COUNT(orders.id) AS order_count,
    SUM(orders.total) AS revenue
FROM users
LEFT JOIN orders ON users.id = orders.user_id
WHERE orders.created_at >= '2026-01-01'
GROUP BY users.id, users.name
HAVING COUNT(orders.id) > 5
ORDER BY revenue DESC
LIMIT 10;

10.7 JSON

{
    "title": "Markdown Rendering Test",
    "version": 1,
    "published": true,
    "metadata": {
        "author": "Test Author",
        "tags": ["markdown", "testing"],
        "rating": 4.9
    },
    "features": [
        "headings",
        "tables",
        "images",
        "code blocks",
        "mathematics"
    ]
}

10.8 Shell

#!/usr/bin/env bash

set -euo pipefail

PROJECT="markdown-test"

echo "Starting ${PROJECT}..."

mkdir -p "${PROJECT}/src"
cd "${PROJECT}"

npm init -y
npm install marked highlight.js

echo "Project initialized successfully!"

10.9 TypeScript

interface User {
    id: number;
    name: string;
    email: string;
    active: boolean;
}

function getActiveUsers(users: User[]): User[] {
    return users.filter(user => user.active);
}

const users: User[] = [
    {
        id: 1,
        name: "Alice",
        email: "alice@example.com",
        active: true
    },
    {
        id: 2,
        name: "Bob",
        email: "bob@example.com",
        active: false
    }
];

console.log(getActiveUsers(users));

10.10 React / JSX

import React, { useState } from "react";

export default function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div className="counter">
            <h2>Counter: {count}</h2>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

10.11 Rust

fn main() {
    let numbers = vec![1, 2, 3, 4, 5];

    let sum: i32 = numbers.iter().sum();

    println!("The sum is: {}", sum);
}

10.12 YAML

site:
  name: Markdown Test Blog
  version: 1.0
  settings:
    theme: dark
    comments: true
    language: en
  authors:
    - Alice
    - Bob

10.13 Diff

- const greeting = "Hello";
+ const greeting = "Hello, world!";

  function sayHello() {
-     console.log("Old message");
+     console.log(greeting);
  }

11. Mathematics

11.1 Inline Mathematics

Einstein’s famous equation is $E = mc^2$.

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

A simple derivative is $\frac{d}{dx}x^n = nx^{n-1}$.

11.2 Block Mathematics

The Pythagorean theorem $n \times n$:

The quadratic formula:

Euler’s identity:

A summation:

A definite integral:

A matrix:

A system of equations:

A limit:

11.3 Greek Letters

11.4 Set Theory

11.5 Complex Mathematical Expression

11.6 Probability

11.7 Linear Algebra

11.8 Multiple Equations

12. Horizontal Rules

Content above the first horizontal rule.

Content between horizontal rules.

Content between another pair.

Content below the final horizontal rule.

13. Footnotes

Markdown supports footnotes in many extended implementations. Here is a sentence with a footnote reference.¹

Here is another sentence with a different reference.²

14. Inline HTML

This is hidden content inside an HTML details element.

It contains Markdown formatting and a list:

• First item
• Second item
• Third item

Ctrl + Shift + P

HTML is commonly used alongside Markdown.

15. Definition Lists

Markdown implementations with definition-list support may render this section:

Markdown

A lightweight markup language.

HTML

A markup language used to structure web pages.

CSS

A stylesheet language used to describe presentation.

16. Escaped and Unusual Content

The following strings should be handled carefully:

• Backslash: \
• Backtick: `
• Pipe: |
• Asterisk: *
• Underscore: _
• Brackets: $$text$$
• Parentheses: $text$
• Braces: {text}
• Tilde: ~
• Hash: #

Here is a line with lots of punctuation:

! ? @ # $ % ^ & * ( ) - _ + = [ ] { } ; : ’ " , . / < >

17. Long Nested Content

1. First major topic

   This is a long paragraph nested inside an ordered list. It should retain its indentation and appropriate spacing while wrapping naturally across multiple lines. Nested content often exposes rendering issues because list indentation, paragraph margins, and line heights interact in ways that are not always obvious.

   • Supporting point A
   • Supporting point B
   • Supporting point C

2. Second major topic

   A quote nested inside a list.

   It should remain aligned with the list content rather than the page edge.

   const nested = true;
   console.log("Nested code block:", nested);
   

3. Third major topic

   Property	Value
   Nested table	Yes
   Markdown	Supported
   Responsive	Expected

18. Mermaid Diagrams

18.1 Flowchart

  flowchart TD
    A[Start] --> B{Is Markdown valid?}
    B -->|Yes| C[Parse Markdown]
    B -->|No| D[Show Error]
    C --> E[Generate HTML]
    E --> F[Render Page]
    D --> G[Fix Syntax]
    G --> B
    F --> H[End]

18.2 Sequence Diagram

  sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database

    User->>Browser: Open blog post
    Browser->>Server: Request article
    Server->>Database: Fetch content
    Database-->>Server: Return Markdown
    Server-->>Browser: Return rendered page
    Browser-->>User: Display article

18.3 Class Diagram

  classDiagram
    class Article {
        +String title
        +String content
        +Date publishedAt
        +render()
    }

    class Author {
        +String name
        +String email
        +writeArticle()
    }

    Author "1" --> "*" Article

18.4 State Diagram

  stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft
    Published --> Archived
    Archived --> [*]

18.5 Pie Chart

  pie showData
    title Markdown Usage
    "Headings" : 20
    "Paragraphs" : 35
    "Code" : 15
    "Images" : 10
    "Tables" : 10
    "Other" : 10

19. Extended Mathematical Notation

19.1 Fractions and Exponents

Inline fraction: $\frac{a+b}{c+d}$

Inline exponent: $x^{n+1}$

Inline subscript: $a_{ij}$

Combined expression: $\frac{x^2+y^2}{z^3}$

19.2 Differential Equations

19.3 Fourier Transform

19.4 Taylor Series

19.5 Complex Numbers

20. Images with Different Dimensions

Three consecutive images should retain their proportions, load independently, and have consistent spacing.

21. Embedded Media

21.1 YouTube Video

https://www.youtube.com/watch?v=dQw4w9WgXcQ

21.2 Audio

21.3 Video

22. Advanced HTML Elements

This is hidden content that becomes visible when the summary is clicked.

Nested heading

Here is a paragraph inside the expandable section.

• Item one
• Item two
• Item three

Ctrl + C

Ctrl + V

Highlighted text

Small text example.

Deleted content

Inserted content

Superscript

Subscript

23. Definition and Reference Lists

HTML

HyperText Markup Language.

CSS

Cascading Style Sheets.

JavaScript

A programming language commonly used for web development.

Markdown

A lightweight markup language.

24. Footnotes and References

Markdown is widely used for documentation.³

It can also be extended with plugins and custom syntax.⁴

25. Advanced Table Stress Test

26. Long Code Block Stress Test

import asyncio
import json
import logging
from dataclasses import dataclass
from typing import Optional, List

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)


@dataclass
class Article:
    id: int
    title: str
    content: str
    published: bool = False
    tags: Optional[List[str]] = None


class ArticleManager:
    def __init__(self):
        self.articles = {}

    def add_article(self, article: Article):
        if article.id in self.articles:
            raise ValueError("Article already exists")

        self.articles[article.id] = article
        logger.info("Article added: %s", article.title)

    def get_article(self, article_id: int):
        return self.articles.get(article_id)

    def publish_article(self, article_id: int):
        article = self.get_article(article_id)

        if article is None:
            raise LookupError("Article not found")

        article.published = True
        logger.info("Article published: %s", article.title)

    def export_json(self):
        return json.dumps(
            {
                article_id: {
                    "title": article.title,
                    "content": article.content,
                    "published": article.published,
                    "tags": article.tags,
                }
                for article_id, article in self.articles.items()
            },
            indent=4,
        )


async def main():
    manager = ArticleManager()

    article = Article(
        id=1,
        title="Markdown Rendering Test",
        content="This is a comprehensive test article.",
        tags=["markdown", "testing", "blog"],
    )

    manager.add_article(article)
    manager.publish_article(1)

    print(manager.export_json())


if __name__ == "__main__":
    asyncio.run(main())

27.2 Repeated Inline Elements

code bold italic code bold italic code bold italic.

27.3 Links with Parentheses

Wikipedia

27.4 Escaped Pipes

27.5 Multiple Blank Lines

Paragraph after multiple blank lines.

27.6 Consecutive Formatting

Bold Italic Strike Code Link Normal.

28. Responsive Layout Stress Test

The following paragraph is intended to test responsive text rendering. It contains enough content to span multiple lines on desktop, tablet, and mobile devices. A properly configured renderer should maintain consistent typography, sensible line lengths, comfortable paragraph spacing, and appropriate padding. It should not allow images to extend beyond their containers, tables to break the page layout, or code blocks to force the entire document to become horizontally scrollable. Instead, individual overflowing elements should have their own scrolling behavior or appropriate wrapping rules.

29. Final Rendering Checklist

30. Conclusion

A Markdown renderer is more than a tool for converting plain text into formatted HTML. It is a central component of the reading experience, responsible for preserving document structure, maintaining visual consistency, and making technical and editorial content equally accessible.

A robust implementation should handle common syntax gracefully while also providing sensible fallbacks for less common extensions. It should support different types of content without sacrificing readability or performance.

Use this document to inspect the entire rendering pipeline. Check the visual hierarchy of headings, the readability of long paragraphs, the alignment of tables, the appearance of blockquotes, the behavior of images, the accuracy of syntax highlighting, and the rendering of mathematical expressions.

Test the page at multiple viewport widths, especially on smaller mobile screens where long code lines, wide tables, and large images can easily cause horizontal overflow.

If every section renders correctly and the layout remains comfortable to read, your blog has passed a fairly demanding Markdown rendering test.

End of Markdown Rendering Test.

Version 2.0 — Comprehensive typography, layout, syntax, and renderer testing.