Eu tenho um lugar onde eu estou tentando mostrar o código em uma área de texto. Eu simplifiquei o exemplo, mas basicamente o usuário pode inserir alguns campos, clicar em um botão e o snippet de código é exibido em uma área de texto abaixo para que eles editem se quiserem e depois copiem.

Eu finalmente consegui trabalhar para exibir o snippet de código real. Mas agora eu não consigo encontrar uma maneira de formatá-lo para que ele seja recuado e fique bem.

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

Que exibe na minha área de texto como assim.

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

Onde eu gostaria de ver isso como:

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

Eu realmente gostaria de evitar plugins de terceiros como para o seu trabalho uma dor para obter aprovação. São apenas 4 pequenos trechos que preciso formatar.

ATUALIZAR Isso parece funcionar como eu preciso.

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

Saída:

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