convertir codigo JavaScript a HTML

Como IT de blogger, a menudo quiero mostrar un bloque de código o un archivo de configuración en mis artículos. El primer día que comencé a blogear, descubrí que cuando pegué el código de guión en una página html, inmediatamente fue asesinado más allá del reconocimiento.

Cuando escribe código en un editor de texto, suele formatearlo para que sea legible, agregando sangrías para el código dentro de las funciones, si las instrucciones, los bucles, etc. HTML generalmente ignora estos sangrías, por lo que su código termina atascado al lado izquierdo del pantalla. Para guardar sus sangrías, debe colocar su código dentro de las etiquetas preformatadas.

Las líneas largas tienden a quedar envueltas en la siguiente línea, haciendo que su código sea confuso o incluso incorrecto si alguien intenta usarlo. Para evitar que las líneas se envuelvan, debe insertar el código en etiquetas y aplicar una regla de estilo CSS a la div, estableciendo la configuración de desbordamiento en automático. Esto pondrá su código en una caja con una barra de desplazamiento horizontal.

Luego hay caracteres especiales. El XHTML trata ciertos caracteres como especiales, interpretándolos como códigos de control. Para mostrar estos caracteres en una página web, debe reemplazarlos por sus correspondientes códigos XHTML, que son:

&lt; ( < )
&gt; ( > )
&amp; ( & )
&quot; ( " )
&39; ( ' )
&124; ( | )

Hacer todos estos cambios a mano es tedioso por decir lo menos. Así que escribí una herramienta en .Net (estaba usando Windows en el momento) para hacerlo por mí. Desde que empecé a correr Linux, lo reescribí en Python, pero me di cuenta de que sería aún más conveniente crear una versión de JavaScript en la web para que mi herramienta estuviera disponible en cualquier máquina que estuviera usando. A continuación se muestra la herramienta. Simplemente ingrese su código en el cuadro de texto y haga clic en Convertir. La salida aparecerá en la segunda casilla. En la parte inferior del artículo, puede ver el código JavaScript que lo hace funcionar. Disfrutar.

Input Text:


Output Text:

Y aquí está el código JavaScript que hace que esto funcione:

<script language="javascript" type="text/javascript">
/* <![CDATA[ */
function converttext(){
 inputtext = document.getElementById('codeconverter').inputtext.value;
    out = inputtext.replace(/\&/g, '&amp;')
    out = out.replace(/\</g, '&lt;')
    out = out.replace(/\>/g, '&gt;')
    out = out.replace(/\"/g, '&quot;')
    out = out.replace(/\'/g, '&#39;')
    out = out.replace(/\|/g, '&#124;')
    out = '<div style="BORDER: #cccccc 1px dashed; PADDING: 5px; WIDTH: 95%; BACKGROUND: #f0f0f0; COLOR: #000000; FONT-SIZE: 12px; OVERFLOW: auto; height:auto"><pre>' + out + '</pre></div>'
 document.getElementById('codeconverter').outputtext.value = out;
}
/* ]]> */
</script>
<form id="codeconverter">
Input Text:<br />
<textarea name="inputtext" cols=80 rows=20></textarea><br />
<input onclick="javascript:converttext();" style="margin-top: 5px;" type="button" value="Convert" /><br />
Output Text:<br />
<textarea name="outputtext" cols=80 rows=20></textarea><br />
</form>