Skip to Content
Edge Cases

Last Updated: 1/27/2026


Edge Cases & Stress Tests

This article tests edge cases that might break styling.

Deeply Nested Lists

Unordered (6 levels)

  • Level 1
    • Level 2
      • Level 3
        • Level 4
          • Level 5
            • Level 6 - Maximum nesting
          • Back to Level 5
        • Back to Level 4
      • Back to Level 3
    • Back to Level 2
  • Back to Level 1

Ordered (6 levels)

  1. First level item
    1. Second level item
      1. Third level item
        1. Fourth level item
          1. Fifth level item
            1. Sixth level - how does this render?
          2. Another fifth level
        2. Another fourth level
      2. Another third level
    2. Another second level
  2. Another first level

Mixed Lists

  • Unordered parent
    1. Ordered child
      • Unordered grandchild
        1. Ordered great-grandchild
          • Back to unordered
    2. Another ordered
  • Back to unordered

Very Long Code Block (Horizontal Scroll)

// This line is intentionally very long to test horizontal scrolling behavior in code blocks - it should scroll horizontally rather than wrap, and the scrollbar should be styled appropriately for the theme const reallyLongVariableName = someFunction(parameterOne, parameterTwo, parameterThree, parameterFour, parameterFive, { optionA: true, optionB: false, optionC: 'some string value' }); // Normal length lines for comparison function normalFunction() { return 'this is normal'; } // Another extremely long line with a complex type annotation that would typically be found in real-world TypeScript code and should definitely trigger horizontal scrolling type ComplexGenericType<T extends Record<string, unknown>, U extends keyof T, V extends T[U]> = { [K in keyof T]: T[K] extends V ? K : never }[keyof T]; // More normal code const config = { apiKey: process.env.API_KEY, timeout: 30000, };
# Very long bash command that should scroll curl -X POST https://api.example.com/v1/very/long/endpoint/path/that/keeps/going -H "Authorization: Bearer your-very-long-api-key-that-is-quite-lengthy" -H "Content-Type: application/json" -d '{"key": "value", "another_key": "another_value", "nested": {"deeply": {"nested": "object"}}}'

Large Code Block (Vertical)

// 50+ lines to test vertical scrolling and line numbers import { createClient } from '@example/sdk'; import type { User, Config, ApiError } from '@example/sdk'; interface AppConfig extends Config { customField: string; anotherField: number; } const config: AppConfig = { apiKey: process.env.API_KEY!, apiUrl: 'https://api.example.com', timeout: 30000, retries: 3, customField: 'custom', anotherField: 42, }; const client = createClient(config); async function fetchAllUsers(): Promise<User[]> { const users: User[] = []; let cursor: string | undefined; do { const response = await client.users.list({ limit: 100, cursor, }); users.push(...response.data); cursor = response.hasMore ? response.nextCursor : undefined; console.log(`Fetched ${users.length} users so far...`); } while (cursor); return users; } async function processUser(user: User): Promise<void> { console.log(`Processing user: ${user.name}`); if (user.status === 'inactive') { console.log('Skipping inactive user'); return; } await client.users.update(user.id, { lastProcessed: new Date().toISOString(), }); } async function main(): Promise<void> { try { const users = await fetchAllUsers(); console.log(`Total users: ${users.length}`); for (const user of users) { await processUser(user); } console.log('Done!'); } catch (error) { console.error('Failed:', error); process.exit(1); } } main();

Special Characters & Unicode

Emoji in Text

This paragraph contains emoji: 🚀 rocket, ✅ checkmark, ⚠️ warning, 🔥 fire, 💡 lightbulb.

Unicode Characters

  • Greek: α β γ δ ε ζ η θ
  • Math: ∑ ∏ ∫ ∂ √ ∞ ≈ ≠ ≤ ≥
  • Arrows: → ← ↑ ↓ ↔ ⇒ ⇐ ⇔
  • Currency: $ € £ ¥ ₹ ₿
  • Symbols: © ® ™ § ¶ † ‡

Code with Unicode

# Unicode in code greeting = "Hello, 世界! 🌍" math_symbols = "∑(i=1 to n) = n(n+1)/2" arrow_function = "f: A → B" print(f"Result: {greeting} | {math_symbols}")

Accented Characters

Café, naïve, résumé, piñata, Zürich, São Paulo, Москва, 東京, مرحبا


Images

Standard Image

Placeholder Image

Small Image

Small Placeholder

Wide Image (should constrain to container)

Wide Placeholder


Tables with Edge Cases

Wide Table (Many Columns)

Col 1Col 2Col 3Col 4Col 5Col 6Col 7Col 8
DataDataDataDataDataDataDataData
MoreMoreMoreMoreMoreMoreMoreMore

Table with Long Content

SettingDescription
apiKeyWithAReallyLongNameThatMightOverflowThis is a configuration option with a very long description that explains what the setting does and why you might want to use it in your application
shortShort description

Table with Code

MethodExampleReturns
list()client.users.list({ limit: 10 })Promise<PaginatedResponse<User>>
get()client.users.get('user_123')Promise<User>
create()client.users.create({ name: 'Alice' })Promise<User>

Callouts with Complex Content

:::tip[Callout with Code] Here’s a tip with a code block inside:

const example = { nested: { code: 'inside callout', }, };

And a table:

AB
12
:::

:::warning[Callout with List] Things to watch out for:

  1. First issue
    • Sub-point A
    • Sub-point B
  2. Second issue
  3. Third issue

And some inline code too. :::

:::danger[Multi-Paragraph Callout] First paragraph of the danger callout explains the main issue.

Second paragraph provides additional context about why this is dangerous and what could go wrong.

Third paragraph offers a solution or workaround to avoid the problem entirely. :::


Blockquotes

Simple Quote

This is a simple blockquote.

Multi-line Quote

This is a longer quote that spans multiple lines.

It has a second paragraph.

And a third paragraph with bold and italic text.

Nested Quotes

Level 1 quote

Level 2 quote

Level 3 quote

Level 4 quote - how deep can we go?

Quote with Code

Here’s a quote with inline code and a code block:

const quoted = true;

Horizontal Rules

Content above the rule.


More content between rules.


Even more content.


Content below the last rule.


Inline Formatting Stress Test

This paragraph has bold, italic, bold italic, inline code, strikethrough, a link , and a mix of bold with code inside and italic with code inside and even code with **markdown** that should not render.

What about a very long bold section that spans multiple lines and contains various elements like code and nested italic and links  to see how the styling holds up?


Empty States

Empty Code Block

Empty Callout

:::note :::

Empty Table Cell

HeaderEmpty
Data
Data