Chaos Test: <escaping>, & symbols, math, media, and unbroken strings
A single feature-dense post built to shake out escaping, deep headings, nesting, wide content, images in loading and failed states, raw HTML, math, and long unbroken strings.
This is the stress fixture. Every block below is here for a reason: to prove that a rich post does not break the reading column, the table of contents, local scrolling, or the archive behind it.
Inline semantics
Plain text with emphasis, strong emphasis, strikethrough, inline code with <angle> & ampersand, and a link with a long label.
Keyboard: ⌘ + K. Marked: a highlighted phrase. Chemistry: H2O. Powers: E = mc2. Direction: مرحبا بالعالم.
Lists at every depth
- Ordered item one
- Unordered child
- Another child
- Ordered grandchild
- Ordered grandchild two
- Back to the unordered child
- Ordered item two
- Child with
inline code - Child with a link
- Ordered item three
- A separate unordered list
- With a second branch
- And a third
- And a fourth
A wider table
| First column | Second column | Third column | Fourth column | Fifth column | Sixth column |
| :--- | :--- | --- | --- | --- | --- |
| A short cell | A cell with a [link](https://example.com) | A cell with `inline code` | A somewhat longer cell that should wrap | Another cell that should wrap when the table is narrow | The last cell in the first row |
| One | Two | Three | Four | Five | Six |
| A very long unbroken value aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa | A value with spaces that wraps naturally | A value with <mark>markup</mark> | A value with **strong text** | A value with *emphasis* | The end |Code with long lines
const result = someFunction({ first: "a long value", second: "another long value", third: "a third value", fourth: "a fourth value", fifth: "a fifth value" });
const anotherLongIdentifierThatShouldNotBreakThePage = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => value * value).filter((value) => value > 10).join(", ");.chaos > .very-long-selector > .another-selector > .yet-another-selector > .still-going > .and-finally-the-target { display: grid; grid-template-columns: minmax(0, 1fr) auto; }https://example.com/a/very/long/path/that/keeps/going/and/going/and/going/without/a/single/useful/place/to/break?query=one&another=two&third=threeInline code in a heading
A heading can carry code without breaking the table of contents.
Math in a heading $x^2 + y^2 = z^2$
The table of contents should typeset the math inline with the heading label.
Media states
Folded content
Open the nested disclosure
Inside the disclosure is ordinary Markdown:
- A list item
- Another list item
And a code sample:
console.log("inside a disclosure");Math
Inline math sits in the line: $a^2 + b^2 = c^2$ and $\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$.
Display math gets its own room:
$$ \nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0} $$
Long unbroken content
An unbroken token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
International text
中文排版需要在同一行内与拉丁文字和平共处。这是一段用于测试换行的中文文本。
هذه فقرة قصيرة باللغة العربية لاختبار اتجاه النص المختلط.
Mixed: שלום, مرحبا, and emoji 🌱 🧪 🧭 in one sentence.
Deep headings
Level three
A level-three heading.
Level four
A level-four heading.
Level five
A level-five heading that should stay out of the table of contents.
Level six
A level-six heading that should still look like a heading rather than a paragraph.
The end
That is the full tour: escaping, nesting, wide content, local scrolling, media states, disclosures, and math. If this post renders calmly, the reading room is holding.
The nested page is linked inline in this sentence: Nested Page — rendered inside the paragraph, not as a standalone card.