Как Redactor JS удается показать отступ кода?

Question

Если вы посмотрите демонстрационную версию Refactor JS и нажмете кнопку, чтобы показать исходный код HTML отображаемого содержимого...

... вы можете увидеть хорошо идентифицированную версию кода:

Почти все редакторы форматированного текста / редактора wysiwyg, которые я знаю, показывали бы код только в одной строке (без каких-либо отступов).

Я не мог понять, как это делается. Есть ли у вас какие-либо идеи?

РЕДАКТИРОВАТЬ:

Кажется, это было не очень понятно. Мой вопрос заключается в том, как этот конкретный текст технически украшен? Я знаю jsbeautifier или такой инструмент, который на самом деле оборачивает каждую строку кода для его стилизации. Но если бы вы просто потратили время на то, чтобы на самом деле перейти по ссылке и увидеть исходный текст, вы бы увидели, как обычная текстовая область в одну строку показывается хорошо и без навязчивых CSS.

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>

Вышеуказанное показано хорошо задумано, и мой вопрос почему? / Как?

Answer 1

Единственная проблема заключается в том, что вы просматриваете Firebug, и кажется, что он показывает исходное содержимое текстовой области вместо его текущего значения.

Бежать document.getElementById("redactor").value в консоли, и вы увидите, что он форматируется так же, как вы видели (и это форматирование не является чем-то особенным, как уже было сказано в других комментариях)