livecodes
v39
¡Un patrón de código que simplemente funciona!
Un patrón de código de código abierto, de código abierto , rico en características para React, Vue, Selte, Solid, TypeScript, Python, GO, Ruby, PHP y más de 90 idiomas/marcos.
Pruébalo ahora en Livecodes.io
Documentación
¿Qué hace que Livecodes sea diferente?
* La cuenta de GitHub solo se requiere para las características que utilizan la integración de GitHub.
... ¡y disfruta de todas las características!
Agregue este código a su página:
< div id =" container " > </ div >
< script type =" module " >
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes' ;
createPlayground ( '#container' , {
params : {
markdown : '# Hello LiveCodes!' ,
css : 'h1 {color: dodgerblue;}' ,
js : 'console.log("Hello, from JS!");' ,
console : 'open' ,
} ,
} ) ;
</ script >Verifique las documentos de los parques infantiles integrados.
Descargar un lanzamiento
Póngalo en un servidor de archivos estático (¡gratis!) 1, 2, 3, 4, 5
Consulte la guía para el auto-anfitrión (incluida la configuración incorporada para implementar las páginas de GitHub).
... ¡y simplemente funciona!
Para obtener más detalles, consulte la lista completa de características.
El Kit de desarrollo de software (SDK) proporciona una interfaz fácil, pero poderosa, para incrustar y comunicarse con Livecodes Playgrounds.
El SDK se proporciona como un paquete NPM de liviano (menos de 5 kb GZIP), que también está disponible en CDNS. Se puede utilizar para crear parques infantiles con una amplia variedad de configuraciones y opciones de incrustación. Además, los métodos SDK permiten la comunicación programática y el control de los parques infantiles durante el tiempo de ejecución.
npm i livecodes
Ejemplo: (Abierto en Livecodes)
import { createPlayground } from 'livecodes' ;
createPlayground ( '#container' , {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
view : 'result' ,
} ) ;El JavaScript SDK es marco/biblioteca agnóstica. Sin embargo, los componentes de envoltura también se proporcionan para bibliotecas populares (actualmente reaccionan y vue). El SDK se puede usar en SVELTE directamente sin envoltorios. El soporte de TypeScript proporciona seguridad tipo y una gran experiencia de desarrollador.
React SDK Ejemplo: (Abierto en Livecodes)
import LiveCodes from 'livecodes/react' ;
const config = {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ;
const Playground = ( ) => < LiveCodes config = { config } view = "result" /> ;
export default Playground ;Vue SDK Ejemplo: (Abierto en Livecodes)
< script setup >
import LiveCodes from 'livecodes/vue' ;
const config = {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ;
</ script >
< template >
< LiveCodes :config =" config " view =" result " />
</ template >Además, el SDK permite crear enlaces a parques infantiles:
import { getPlaygroundUrl } from 'livecodes' ;
const url = getPlaygroundUrl ( {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
} ) ;
console . log ( url ) ;Vea los documentos SDK para más detalles.
Las documentaciones completas para las características, la entrada, la configuración y el SDK están disponibles en:
https://livecodes.io/docs/
Las documentos incluyen demostraciones, muestras de código, capturas de pantalla, libros de cuentos y tipos de mecanografiado.
Manténgase al día con los últimos cambios:
¡Damos la bienvenida a los comentarios!
Comience un nuevo número o discusión.
Para informes de seguridad, consulte Security.md.
También puede comunicarse con nosotros utilizando el formulario de contacto.
Las contribuciones son bienvenidas y muy apreciadas.
¡Un gran agradecimiento a nuestros maravillosos contribuyentes! ¡Tu arduo trabajo marca la diferencia!
Consulte la Guía de contribución.
Livecodes utiliza servicios generosamente proporcionados por:
Los paquetes utilizados por Livecodes y sus licencias se enumeran aquí.
Licencia MIT © Hatem Hosny
Livecodes es gratuito y de código abierto. La aplicación no contiene anuncios ni requiere suscripción. Permite un uso ilimitado sin restricciones.
Al patrocinar Livecodes, apoyará el desarrollo y el mantenimiento continuos del proyecto, así como para garantizar que siga siendo un recurso valioso para la comunidad de desarrolladores.
Considere convertirse en patrocinador.
