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
- Level 5
- Back to Level 4
- Level 4
- Back to Level 3
- Level 3
- Back to Level 2
- Level 2
- Back to Level 1
Ordered (6 levels)
- First level item
- Second level item
- Third level item
- Fourth level item
- Fifth level item
- Sixth level - how does this render?
- Another fifth level
- Fifth level item
- Another fourth level
- Fourth level item
- Another third level
- Third level item
- Another second level
- Second level item
- Another first level
Mixed Lists
- Unordered parent
- Ordered child
- Unordered grandchild
- Ordered great-grandchild
- Back to unordered
- Ordered great-grandchild
- Unordered grandchild
- Another ordered
- Ordered child
- 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
Small Image
Wide Image (should constrain to container)
Tables with Edge Cases
Wide Table (Many Columns)
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 | Col 6 | Col 7 | Col 8 |
|---|---|---|---|---|---|---|---|
| Data | Data | Data | Data | Data | Data | Data | Data |
| More | More | More | More | More | More | More | More |
Table with Long Content
| Setting | Description |
|---|---|
apiKeyWithAReallyLongNameThatMightOverflow | This 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 |
short | Short description |
Table with Code
| Method | Example | Returns |
|---|---|---|
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:
| A | B |
|---|---|
| 1 | 2 |
| ::: |
:::warning[Callout with List] Things to watch out for:
- First issue
- Sub-point A
- Sub-point B
- Second issue
- 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
codeand 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
| Header | Empty |
|---|---|
| Data | |
| Data |