У меня есть место, где я пытаюсь показать код в текстовой области. Я остановился на примере, но в основном пользователь может ввести некоторые поля, щелкнуть кнопку, и фрагмент кода отобразится в текстовой области ниже для их редактирования, если они захотят, а затем скопировать.

Наконец-то я заработал, чтобы отобразить фактический фрагмент кода. Но теперь я не могу найти способ отформатировать его так, чтобы он был с отступом и выглядел красиво.

var mySnippet =
"<div id=\"myOuterDiv\">"
    + "<div id=\"myInnerDiv\">"
    + "</div>"
    + "</div>";
$('#mySnippetArea').text(mySnippet);

Который отображается в моей текстовой области так.

<div id="myOuterDiv"><div id="myInnerDiv"></div></div>

Где, как я хотел бы видеть это как:

    <div id="myOuterDiv">
        <div id="myInnerDiv">
        </div>
    </div>

Мне бы очень хотелось, чтобы сторонние плагины не использовались, так как для работы это боль, получить одобрение. Это всего лишь 4 маленьких фрагмента, которые мне нужно отформатировать.

UPDATE Похоже, это работает, как мне нужно.

var mySnippet =
        "<div id=\"myOuterDiv\">\r"
            + "    <div id=\"myInnerDiv\">\r"
            + "    </div>\r"
            + "</div>\r";

Выход:

<div id="myOuterDiv">
    <div id="myInnerDiv">
    </div>
</div>