livecodes
v39
Um playground de código que apenas funciona!
Um playground de código do lado do cliente rico em recursos, de código aberto para reação, vue, esbelto, sólido, datilografado, python, go, ruby, php e mais de 90 idiomas/estruturas.
Experimente agora em LiveCodes.io
Documentações
O que torna os LiveCodes diferentes?
* A conta do GitHub é necessária apenas para recursos que usam integração do GitHub.
... e aproveite todos os recursos!
Adicione este código à sua 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 as documentações para playgrounds incorporados.
Baixe um lançamento
Coloque -o em um servidor de arquivo estático (gratuitamente!) 1, 2, 3, 4, 5
Verifique o guia para obter auto-hospedagem (incluindo a configuração interna para implantar para as páginas do GitHub).
... e funciona!
Para detalhes, verifique a lista completa de recursos.
O Kit de Desenvolvimento de Software (SDK) fornece uma interface fácil, mas poderosa, para incorporar e se comunicar com os playgrounds LiveCodes.
O SDK é fornecido como um pacote NPM de dependências de dependências zero, que também está disponível na CDNS. Ele pode ser usado para criar playgrounds com uma ampla variedade de configurações e opções de incorporação. Além disso, os métodos SDK permitem comunicação programática e controle dos playgrounds durante o tempo de execução.
npm i livecodes
Exemplo: (aberto em LiveCodes)
import { createPlayground } from 'livecodes' ;
createPlayground ( '#container' , {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
view : 'result' ,
} ) ;O JavaScript SDK é a estrutura/biblioteca agnóstica. No entanto, componentes do invólucro também são fornecidos para bibliotecas populares (atualmente reagem e vue). O SDK pode ser usado diretamente em esbelto sem invólucros. O suporte ao TypeScript oferece segurança do tipo e uma ótima experiência de desenvolvedor.
React SDK Exemplo: (aberto em LiveCodes)
import LiveCodes from 'livecodes/react' ;
const config = {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ;
const Playground = ( ) => < LiveCodes config = { config } view = "result" /> ;
export default Playground ;Exemplo de vue sdk: (aberto em viveiros)
< script setup >
import LiveCodes from 'livecodes/vue' ;
const config = {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ;
</ script >
< template >
< LiveCodes :config =" config " view =" result " />
</ template >Além disso, o SDK permite criar links para playgrounds:
import { getPlaygroundUrl } from 'livecodes' ;
const url = getPlaygroundUrl ( {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
} ) ;
console . log ( url ) ;Consulte o SDK Docs para obter mais detalhes.
Documentações abrangentes para recursos, início, configuração e SDK estão disponíveis em:
https://livecodes.io/docs/
As documentações incluem demos, amostras de código, capturas de tela, livro de histórias e tipos de texto de texto.
Acompanhe as últimas alterações:
Congratulamo -nos com feedback!
Por favor, comece um novo problema ou discussão.
Para relatórios de segurança, consulte Security.md.
Você também pode entrar em contato com o formulário de contato.
As contribuições são bem -vindas e muito apreciadas.
Um enorme grito para nossos maravilhosos colaboradores! Seu trabalho duro faz toda a diferença!
Consulte o guia de contribuição.
O LiveCodes usa serviços generosamente fornecidos por:
Os pacotes usados pelos LiveCodes e suas licenças estão listados aqui.
MIT Licença © Hatem Hosny
LiveCodes é gratuito e de código aberto. O aplicativo não contém anúncios ou requer assinatura. Permite uso ilimitado sem restrições.
Ao patrocinar LiveCodes, você apoiará o desenvolvimento e a manutenção contínuos do projeto, além de ajudar a garantir que ele continue sendo um recurso valioso para a comunidade de desenvolvedores.
Por favor, considere se tornar um patrocinador.
