livecodes
v39
Un terrain de jeu de code qui fonctionne!
Un terrain de jeu de code côté client riche en fonctionnalités, open-source, pour React, Vue, Svelte, Solid, TypeScript, Python, Go, Ruby, PHP et 90+ langues / frameworks.
Essayez-le maintenant sur livecodes.io
Documentations
Qu'est-ce qui rend les livecodes différents?
* Le compte GitHub est requis uniquement pour les fonctionnalités qui utilisent l'intégration GitHub.
... et profitez de toutes les fonctionnalités!
Ajoutez ce code à votre page:
< 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 >Vérifiez les documents pour les terrains de jeux intégrés.
Télécharger une version
Mettez-le sur un serveur de fichiers statique (gratuitement!) 1, 2, 3, 4, 5
Vérifiez le guide pour l'auto-hébergement (y compris la configuration intégrée à déployer sur les pages GitHub).
... et ça marche juste!
Pour plus de détails, consultez la liste complète des fonctionnalités.
Le kit de développement de logiciels (SDK) fournit une interface facile mais puissante à intégrer et à communiquer avec les terrains de jeux Livecodes.
Le SDK est fourni en tant que poids léger (moins de 5 kb gzipped), package NPM de dépendances zéro, qui est également disponible auprès des CDN. Il peut être utilisé pour créer des terrains de jeux avec une grande variété de configurations et d'options d'intégration. De plus, les méthodes SDK permettent la communication et le contrôle programmatiques des terrains de jeux pendant l'exécution.
npm i livecodes
Exemple: (ouvert en livecodes)
import { createPlayground } from 'livecodes' ;
createPlayground ( '#container' , {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
view : 'result' ,
} ) ;Le SDK JavaScript est Framework / Library Agnostic. Cependant, des composants en wrapper sont également fournis pour les bibliothèques populaires (actuellement React et Vue). Le SDK peut être utilisé directement dans Svelte sans emballages. La prise en charge de typeScript offre une sécurité de type et une excellente expérience de développeur.
React SDK Exemple: (Ouvert 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 Exemple: (ouvert 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 >De plus, le SDK permet de créer des liens vers les terrains de jeux:
import { getPlaygroundUrl } from 'livecodes' ;
const url = getPlaygroundUrl ( {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
} ) ;
console . log ( url ) ;Voir les documents SDK pour plus de détails.
Des documentations complètes pour les fonctionnalités, le démarrage, la configuration et le SDK sont disponibles sur:
https://livecodes.io/docs/
Les documentations incluent des démos, des échantillons de code, des captures d'écran, un livre de contes et des types de dactylographie.
Suivre les derniers changements:
Nous accueillons les commentaires!
Veuillez démarrer un nouveau problème ou une nouvelle discussion.
Pour les rapports de sécurité, veuillez vous référer à Security.md.
Vous pouvez également nous contacter en utilisant le formulaire de contact.
Les contributions sont les bienvenues et très appréciées.
Un énorme cri à nos merveilleux contributeurs! Votre travail acharné fait toute la différence!
Veuillez vous référer au guide de contribution.
Livecodes utilise des services qui sont généreusement fournis par:
Les packages utilisés par Livecodes et leurs licences sont répertoriés ici.
Licence MIT © Hatem Hosny
Livecodes est gratuit et open-source. L'application ne contient pas de publicités ni ne nécessite d'abonnement. Il permet une utilisation illimitée sans aucune restriction.
En parrainant Livecodes, vous soutiendrez le développement et la maintenance continus du projet, ainsi que pour vous assurer qu'il reste une ressource précieuse pour la communauté des développeurs.
Veuillez envisager de devenir un sponsor.
