Tengo un lugar donde intento mostrar el código en un área de texto. He silenciado el ejemplo, pero básicamente el usuario puede ingresar algunos campos, hacer clic en un botón, y el fragmento de código se muestra en un área de texto debajo para que lo editen si lo desean y luego lo copian.

Finalmente lo puse en funcionamiento para mostrar el fragmento de código real. Pero ahora parece que no puedo encontrar una manera de formatearlo para que tenga sangría y se vea bien.

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

Que se muestra en mi área de texto como tal.

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

Donde me gustaría verlo como:

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

Realmente me gustaría evitar los complementos de terceros, ya que es por trabajo y una molestia obtener la aprobación. Solo necesito 4 pequeños fragmentos para formatear.

ACTUALIZAR Esto parece funcionar como necesito.

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

Salida:

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