How to improve readability of highly-structured text

NOTE: This question explores methods for increasing readability for a target user group.

Background: Readability is invaluable when dealing with large amounts of text. For some users, programmers, that text represents "objects" in a computer system. These objects often have a hierarchical structure (i.e. objects have parent-child and sibling relationships with other objects). Traditionally, these "nesting" relationships have been communicated to the user by increasing the left margin to show which object belongs to which (the child object is indented greater than its parent, and siblings start at the same level as each other).

The Problem: On one hand deeply nested code is hard to read. On the other hand, visualising nesting levels are necessary to understand code. De-nesting code/html requires a lot of effort, which only improves readability, not actual code effectiveness, accuracy etc.

Is there a way to communicate hierarchy other than adjusting indentation?

I will provide a small piece of sample text, along with my first attempt at making it more readable using some colors, shapes, etc. I'm sure someone can do a better job. Let's make a breakthrough together!

Normal nesting using white-space (text version):

Attempt 1: show nesting in margin:

attempt 2: add shapes in code to show level:

attempt 3: replace filled overlay with bordered area markers: