How does Redactor JS manages to show indented code?

Question

If you look at the Refactor JS demo, and if you click on the button to show the HTML source code of the displayed content...

...you can see a well-idented version of the code :

Almost all the rich text editors / wysiwyg editors I know would show the code in only one line (without any indents).

I couldn't manage to understand how this is done. Do you have any ideas?

EDIT :

It seems It wasn't very clear. My question is how that particuar text is technicaly beautified ? I know jsbeautifier or that kind of tool which actualy wraps each line of code to style it. But if you would just take the time to actualy go to the link and see the source, you would see a normal one line textarea being showed well intended, without any obstrusive CSS in it.

HTML

<textarea id="redactor" style="display: block; height: 797px;" dir="ltr"><h2>The Last of The Mohicans</h2> <p><em>by James Fenimore Cooper​​</em></p> <p>Winding its way among countless islands, and imbedded in mountains, the "holy lake" extended a dozen leagues still further to the south. With the high plain that there interposed itself to the further passage of the water, commenced a portage of as many miles, which conducted the adventurer to the banks of the Hudson, at a point where, with the usual obstructions of the rapids, or rifts, as they were then termed in the language of the country, the river became navigable to the tide.​</p> <p><img src="/img/redactor-image.jpg" width="1400" height="582"></p> <p>"Come," he said, with a good-humored smile; "the buck that will take to the water must be headed, and not followed."</p> <p>The route taken by Hawkeye lay across those sandy plains, relived by occasional valleys and swells of land, which had been traversed by their party on the morning of the same day, with the baffled Magua for their guide. The sun had now fallen low toward the distant mountains; and as their journey lay through the interminable forest, the heat was no longer oppressive. Their progress, in consequence, was proportionate; and long before the twilight gathered about them, they had made good many toilsome miles on their return.​</p> </textarea>

The above is showed well intended, and my question is why? / How?

Answer 1

The only problem is that you're looking with Firebug and it seems to show the original content of the textarea instead of its current value.

Run document.getElementById("redactor").value in the console and you'll see that it's formated just as you saw (and this formatting isn't anything special as other comments have already stated)