Typography & Style Test Suite

This document tests all markdown elements, typography styles, and edge cases to ensure proper rendering across the site.

Headings Hierarchy

H1: The Quick Brown Fox Jumps Over the Lazy Dog

H2: The Quick Brown Fox Jumps Over the Lazy Dog

H3: The Quick Brown Fox Jumps Over the Lazy Dog

H4: The Quick Brown Fox Jumps Over the Lazy Dog

H5: The Quick Brown Fox Jumps Over the Lazy Dog

H6: The Quick Brown Fox Jumps Over the Lazy Dog

Text Formatting & Inline Elements

This paragraph demonstrates bold text, italic text, bold and italic, ~~strikethrough~~, and inline code. You can also use Ctrl + C for keyboard shortcuts, and show highlighted text.

Here's a paragraph with ^superscript and _subscript elements. Testing x² + y² = z² and H₂O.

This is a standard link, and this is a link with title. Here's an autolink: https://example.com.

Testing very long inline code that might wrap: const veryLongFunctionNameThatMightCauseWrappingIssuesInSomeLayouts = () => { return "testing"; }.

Lists

Unordered Lists

First level item one
First level item two
- Second level item one
- Second level item two
- Third level item one
- Third level item two
  - Fourth level item
- Second level item three
First level item three

Ordered Lists

First item
Second item
Third item
1. Nested item 3.1
2. Nested item 3.2
  1. Double nested 3.2.1
  2. Double nested 3.2.2
3. Nested item 3.3
Fourth item

Mixed Lists

Ordered item
- Unordered nested
- Another unordered
  1. Ordered nested in unordered
  2. Another ordered
Back to ordered

Task Lists

[x] Completed task
[x] Another completed task
[ ] Pending task
[ ] Another pending task
- [x] Nested completed
- [ ] Nested pending

Blockquotes

Simple blockquote with a single paragraph.

Multi-paragraph blockquote.

This is the second paragraph in the same blockquote.

And a third one for good measure.

Nested blockquote test:

This is a nested blockquote inside another blockquote.

And this is double-nested.

Blockquote with bold, italic, code, and links.

Also with lists

Multiple items
// And code blocks
console.log("inside blockquote")

Code Blocks

Inline Code Edge Cases

Testing code with **asterisks** and code with _underscores_ and code with <html>tags</html>.

JavaScript/TypeScript

// JavaScript example with comments
function fibonacci(n) {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

const result = fibonacci(10)
console.log(`Fibonacci(10) = ${result}`)

// Testing edge cases: strings, regex, etc.
const regex = /^test$/gi
const template = `Multi-line
template literal
with ${result}`

// TypeScript with types and interfaces
interface User {
  id: number
  name: string
  email?: string
}

type UserRole = "admin" | "user" | "guest"

class UserManager<T extends User> {
  private users: T[] = []

  addUser(user: T): void {
    this.users.push(user)
  }

  getUser(id: number): T | undefined {
    return this.users.find((u) => u.id === id)
  }
}

Python

# Python example with various constructs
def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

# Testing with decorators and classes
@dataclass
class Person:
    name: str
    age: int

    def greet(self) -> str:
        return f"Hello, I'm {self.name}"

Rust

// Rust example
fn main() {
    let numbers = vec![1, 2, 3, 4, 5];
    let sum: i32 = numbers.iter().sum();
    println!("Sum: {}", sum);
}

struct Point<T> {
    x: T,
    y: T,
}

impl<T> Point<T> {
    fn new(x: T, y: T) -> Self {
        Point { x, y }
    }
}

Shell/Bash

#!/bin/bash
# Shell script example

for i in {1..5}; do
  echo "Iteration $i"
  if [ $i -eq 3 ]; then
    echo "Found three!"
  fi
done

# Function example
function backup() {
  local source=$1
  local dest=$2
  tar -czf "$dest" "$source"
}

JSON

{
  "name": "test-project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "typescript": "^5.0.0"
  },
  "nested": {
    "array": [1, 2, 3],
    "boolean": true,
    "null": null
  }
}

CSS

/* CSS with various selectors and properties */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 2rem;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

#special-element:hover::before {
  content: "→ ";
  color: oklch(60% 0.2 250);
}

Code Without Language Specified

No language specified
This should still render with monospace font
And preserve    whitespace

Very Long Code Lines

const extremelyLongVariableNameThatWillDefinitelyCauseHorizontalScrollingInMostLayoutsUnlessWordWrapIsEnabled =
  "This tests horizontal scrolling behavior"

Tables

Simple Table

Column 1	Column 2	Column 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Table with Alignment

Left Aligned	Center Aligned	Right Aligned
Left	Center	Right
A	B	C
1	2	3

Table with Formatting

Feature	Description	Status
Bold	Text in various styles	✅ Complete
`Code`	Inline code in table	✅ Complete
Link	Links in table cells	✅ Complete
Long text cell	This cell has much longer text	🔄 Progress
Emoji	Testing emoji rendering 🚀 ⚡ 💡 🎨	✅ Complete

Table with Long Content

Very Long Header Name That Tests Wrapping	Another Long Header	Short
This cell contains a lot of text that will definitely need to wrap in most viewport sizes unless we implement horizontal scrolling	Medium length content here with bold and italic	Short
Short	A paragraph of text that spans multiple lines and tests how tables handle content overflow and wrapping behavior	✓

Complex Table

Language	Type	Paradigm	First Appeared	Popular Use Cases
JavaScript	Interpreted	Multi-paradigm	1995	Web, Node.js
Python	Interpreted	Multi-paradigm	1991	Data Science, ML
Rust	Compiled	Systems	2010	Systems, WebAssembly
TypeScript	Transpiled	Object-Oriented	2012	Large-scale apps

Horizontal Rules

Testing different horizontal rule styles:

Text before and after rules to test spacing.

Special Characters & Symbols

Testing various Unicode characters and symbols:

Math & Science

× ÷ ± ∓ √ ∞ ≈ ≠ ≤ ≥ π α β γ δ Δ Σ ∫ ∂ ∇

Arrows

← → ↑ ↓ ↔ ↕ ⇐ ⇒ ⇑ ⇓ ⇔ ↖ ↗ ↘ ↙

Currency & Commercial

$ € ¥ £ ¢ ₹ ₽ ₿ © ® ™ § ¶

Punctuation & Symbols

• ‣ ⁃ ◦ ⁌ ⁍ … † ‡ ′ ″ ‴

Emoji Support

Emoji in text: 👋 Hello! Testing various emoji: 🚀 ⚡ 💡 🎨 🔥 ✨ 🌟 💻 📱 🌈

Emoji in headings:

🎯 Heading with Emoji

Emoji in lists:

📝 First item
✅ Second item
🔄 Third item

Emoji in code: const rocket = "🚀";

Multi-language Support

English

The quick brown fox jumps over the lazy dog.

Spanish (Español)

El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.

Japanese (日本語)

色は匂へど散りぬるを我が世誰ぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす

こんにちは、世界！これはテストです。漢字、ひらがな、カタカナ。

Chinese (中文)

天地玄黄，宇宙洪荒。日月盈昃，辰宿列张。

Korean (한국어)

가나다라마바사아자차카타파하

다람쥐 헌 쳇바퀴에 타고파

Arabic (العربية)

مرحبا بالعالم! هذا اختبار للنص العربي من اليمين إلى اليسار.

Hebrew (עברית)

שלום עולם! זהו מבחן לטקסט בעברית מימין לשמאל.

Greek (Ελληνικά)

Γεια σου κόσμε! Αυτό είναι ένα τεστ ελληνικού κειμένου.

Cyrillic (Русский)

Здравствуй, мир! Это тест кириллического текста.

Mixed Content Tests

Code in Lists

First, install the package:

   npm install package-name

Then import it:

   import { something } from "package-name"

Finally, use it in your code

Blockquote with Everything

Comprehensive Blockquote Test

This blockquote contains various elements:

List item one

List item two with inline code

List item three

Here's some code:
const test = "in blockquote"
And a link for good measure.

Table In Blockquote

Cell Data Value

Table	In	Blockquote
Cell	Data	Value

Edge Case: Empty Elements

Empty blockquote:

Empty code block:

Empty list items

Long Content Tests

Very Long Paragraph

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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Very Long URL

Testing very long URLs: https://example.com/very/long/path/that/goes/on/and/on/and/on/and/continues/for/quite/a/while/to/test/url/wrapping

Very Long Unbroken Text

Thisisaverylongwordwithoutanyspacesthatmightcausehorizontalscrollingorwrappingissuesinsomebrowsersandlayoutssoletsseehowthestyleshandleit.

Definition Lists (if supported)

Term 1: Definition for term 1
Term 2: Definition for term 2 with **bold** text; Secondary definition for term 2
Term 3 with code: Definition with a link

HTML Elements

Testing raw HTML elements:

Click to expand

This is hidden content inside a details element. It can contain **markdown** too! - List item - Another item ```javascript console.log("code works too") ```

Ctrl + Shift + P

Highlighted text

Text with _subscript and ^superscript

HTML

Nested Structures

Deep Nesting Test

Level 1 ordered
- Level 2 unordered
  - Level 3 unordered
  - Level 4 ordered
    - Level 5 unordered > Level 6 blockquote > > With multiple paragraphs > > javascript > // Level 7 code > console.log("nested") >

Complex Markdown Table

Feature	Syntax	Example	Notes
Bold	`text` or `__text__`	bold	Both work
Italic	`text` or `_text_`	italic	Both work
`Code`	`code`	`inline`	Backticks
~~Strike~~	`~~text~~`	~~struck~~	Double tilde
Link	`[text](url)`	example	Inline link

Edge Cases

Multiple Blank Lines

(Three blank lines above)

Consecutive Formatting

bold**bold2** italic__italic2 codecode2

Escaped Characters

*not italic* `not code` [not a link](test)

Mixed Direction Text (RTL + LTR)

This is English text with some Arabic مرحبا بالعالم mixed in and then back to English.

Similarly with Hebrew: שלום עולם in the middle of English text.

Final Stress Tests

All Inline Elements Combined

This paragraph has bold, italic, bold italic, ~~strikethrough~~, inline code, a link, Ctrl, highlight, ^superscript, _subscript, and even 🚀 emoji all in one sentence to test how they interact with each other and the line height and spacing.

Conclusion

This completes the comprehensive typography and style test suite. All elements should render correctly with proper spacing, typography, and responsive behavior.