Hugo Suárez López@hugosuarezlopez
¡Hola comunidad de EDteam! Frecuentemente comento en los videos de los cursos que estoy estudiando y suelo compartir mi código fuente para resolver alguna duda o para aportar con algo significativo al contenido de la clase. Sin embargo, al momento de copiar el código que había escrito en VS Code y pegarlo en alguna caja de comentarios acá en EDteam; antes de publicarlo el código se ve tal cual en el editor, pero una vez ya publicado se DESESTRUCTURA de una forma ininteligible.
¿Qué debo hacer para que el código no se desorganice? Cabe resaltar que mi propósito al copiar y pegar mi código, es para que cualquier compañero en EDteam tenga acceso inmediato para comprobar el algoritmo en su propia PC.
Por ejemplo, hice un pequeño documento HTML de muestra para que vean claramente de lo que hablo. También les adjunto una captura de pantalla del mismo código en VS Code para que noten la gran diferencia visual en ambas plataformas. Sin más, he aquí el copy-paste del código fuente de muestra:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Subgrid layout</title> <link rel="stylesheet" href="style.css"> </head> <body>
<span style="color: #7ca668;"><!-- Creación del grid container --></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"container"</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>01<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>02<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>03<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"subgrid"</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"subitem"</span><span style="color: #808080;">></span>I<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"subitem"</span><span style="color: #808080;">></span>II<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"subitem"</span><span style="color: #808080;">></span>III<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"subitem"</span><span style="color: #808080;">></span>IV<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>04<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>05<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>06<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>07<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>08<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></body> </html>
