Supongo que te refieres a CodePen
No hay compilador involucrado allí. Simplemente está utilizando el intérprete Javascript de su navegador.
Los editores de código se implementan en el navegador utilizando la biblioteca CodeMirror.
- ¿Cómo se llama la función de devolución de llamada en un motor de JavaScript?
- ¿Cómo definirás una constante en PHP?
- ¿ASP.NET es algo que debes aprender como desarrollador web front-end?
- ¿Se espera que los desarrolladores web junior sepan SASS / LESS?
- ¿Continuará utilizando un servicio de empresa de desarrollo web si descubre que se pueden comprar fácilmente 5 diseños de maquetas en un mercado como Themeforest?
Le ofrece tres editores, uno para HTML, uno para CSS y otro para Javascript. Es compatible con preprocesadores – SCSS -> CSS y CoffeeScript, LiveScript, TypeScript o Babel -> Javascript.
Una vez que haya guardado su código, configura un Iframe en la ventana de salida y permite que su navegador cargue y ejecute su código en ese iframe.
Javascript puede modificar el DOM, por lo que todo lo que tiene que hacer es construir y agregar una etiqueta para que el contenido correcto DIV, apuntándolo al HTML (que construye de manera similar a:
contenido del panel del editor HTML aquí …
No voy a decirte cómo modificar el DOM; deberías usar alguna biblioteca de IU de Javascript que tendrá su propia forma preferida. Esta es una operación estándar para aplicaciones web.
Eso es todo.
Nunca había oído hablar de CodePen antes de esta pregunta, aunque había visto muchos como este e incluso he implementado algunas características similares. Para conocer los detalles (por ejemplo, qué editor de código usaron), simplemente hice clic derecho y elegí Inspeccionar, y miré qué scripts cargaba.
=======
Podría, por supuesto, implementar un compilador basado en la web. Probablemente no sea algo que desee hacer: los compiladores para lenguajes no triviales son mucho trabajo, y compilar a través de la web es en realidad menos conveniente que invocar compiladores directamente en los archivos.
Aún así, si tiene una buena razón y un lenguaje simple o la habilidad y el tiempo para implementar un compilador más complejo, no hay nada que lo detenga. Puede hacerlo en Javascript en su navegador o en un idioma de elección en el back-end.
Pero creo que la primera sección es lo que estás buscando.
