Wyświetl sformatowany surowy html za pomocą jquery

Mam miejsce, w którym próbuję pokazać kod w obszarze tekstowym. Zgłębiłem przykład, ale zasadniczo użytkownik może wprowadzić kilka pól, kliknąć przycisk, a fragment kodu wyświetli się poniżej w polu tekstowym, aby je edytować, jeśli chcą, a następnie skopiować.

W końcu udało mi się wyświetlić rzeczywisty fragment kodu. Ale teraz nie mogę znaleźć sposobu na sformatowanie go tak, aby był wcięty i ładnie wyglądał.

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

Który wyświetla się w moim obszarze tekstowym w ten sposób.

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

Gdzie chciałbym to zobaczyć jako:

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

Naprawdę chciałbym uniknąć jakichkolwiek wtyczek innych firm, ponieważ jest to dla mnie ból i trudność z uzyskaniem zgody. To tylko 4 małe fragmenty, które muszę sformatować.

AKTUALIZACJA To wydaje się działać tak, jak potrzebuję.

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

Wydajność:

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

questionAnswers(2)

yourAnswerToTheQuestion