If this was simply text on a page then the normal conventions of varying the font size and spacing between lines of text would be more than sufficient to deal with the level of hierarchy and structure (although you could certainly try to apply some of it as well). However, in this instance it is not necessarily true that the content at the top of the hierarchy is more important compared to the content nested deeper (e.g. just wraps everything up).
Lets use the examples you have provided and see how they can be improved to illustrate what is important when visualizing content in hierarchy.
The problem here is that the only hierarchy represented by the whitespace is the depth of the nesting and not the hierarchy of the page, which still needs to be interpreted by going through each line and understanding the structure, and also it becomes more difficult to distinguish the hierarchy as more levels of nesting is introduced into the code. Clearly there are more dimensions to visualize then there are ways to represent them, so you need to introduce more elements.
Show nesting in margin
The use of the vertical bars to represent code at the same level of hierarchy is a way to address the problem of just using white space, and adding colours helps to make the different levels even more distinguishable. However, this is still a solution that cannot be scaled easily when you have too many deeply nested layers, and still only solves the problems of helping people identify the depth of the nesting but not the semantics of the hierarchy.
Shapes and border markers
Not really sure that it adds much more value to what has already been done with the bars in the margin, and in fact this is probably an example of overloading the visual representation so that it actually increases the amount of visual information that you have to process without too much additional benefit. If you compare it to the previous solutions you'll find that it is easier to process the hierarchy information without having to look at the code compared to having the colours, shapes and borders mixed in with the code.
Use the vertical bars in the margin to show the hierarchy because I think it is the most minimal way to represent hierarchy. I like the idea of colour coding the blocks of code (both in the vertical bars and the shape/border) but you should match it with the type of HTML element and not the hierarchy because then you lose the ability to encode two different types of information at the same time. In the example you showed two elements at different hierarchy coded in different colours when they could be the same colour but having different depth of the vertical bar to show that they are the same element at different hierarchy.
Actually, I have seen HTML editor (or text editors in general) that allow you to expand and collapse nested code when the syntax of the content is specified. These editors allow you to also expand and collapse the code at specified levels of hierarchy and is therefore a much more efficient way of accessing the content (i.e. they allow you to navigate the hierarchy instead of only visualizing it).
The suggestion of opacity by Tin Man is quite interesting, as it offers a way to show the depth of nesting combined with focusing the users attention to the area that they are interested in. But rather than a fixed visual cue, you could introduce some interaction to make this relative to the level of hierarchy you are currently at, so that as you move down the hierarchy you decrease the opacity of the levels below.