livecodes
v39
Ein Code -Spielplatz, der einfach funktioniert!
Ein merkmalreiches, open-Source-Code -Code -Code-Spielplatz für React, Vue, Sufle, Solid, TypeScript, Python, Go, Ruby, PHP und 90+. Sprachen/Frameworks.
Versuchen Sie es jetzt auf LiveCodes.io
Dokumentationen
Was unterscheidet LiveCodes?
* GitHub -Konto ist nur für Funktionen erforderlich, die die GitHub -Integration verwenden.
... und genießen Sie alle Funktionen!
Fügen Sie diesen Code Ihrer Seite hinzu:
< 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 >Überprüfen Sie die Dokumentationen auf eingebettete Spielplätze.
Laden Sie eine Veröffentlichung herunter
Setzen Sie es auf einen statischen Dateiserver (kostenlos!) 1, 2, 3, 4, 5
Überprüfen Sie die Anleitung zum Selbsthosting (einschließlich des integrierten Setups zum Bereitstellen auf Github-Seiten).
... und es funktioniert einfach!
Weitere Informationen finden Sie in der vollständigen Liste der Funktionen.
Das Software Development Kit (SDK) bietet eine einfache, aber leistungsstarke Schnittstelle zum Einbetten und Kommunikation mit LiveCodes -Spielplätzen.
Das SDK wird als leichtes (weniger als 5 KB GZIPPED), NPM-Paket mit Null-Abhängigkeiten bereitgestellt, das auch bei CDNs erhältlich ist. Es kann verwendet werden, um Spielplätze mit einer Vielzahl von Konfigurationen und Einbettenoptionen zu erstellen. Darüber hinaus ermöglichen SDK -Methoden die programmatische Kommunikation und Kontrolle der Spielplätze während der Laufzeit.
npm i livecodes
Beispiel: (Open in LiveCodes)
import { createPlayground } from 'livecodes' ;
createPlayground ( '#container' , {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
view : 'result' ,
} ) ;Das JavaScript SDK ist agnostisch Framework/Bibliothek. Wrapper -Komponenten werden jedoch auch für beliebte Bibliotheken bereitgestellt (derzeit reagieren und VUE). Der SDK kann in Sufle direkt ohne Verpackungen verwendet werden. Die Support von TypeScript bietet Typ-Safety und ein großartiges Entwicklererlebnis.
React SDK Beispiel: (Open in 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 -Beispiel: (Open in LiveCodes)
< script setup >
import LiveCodes from 'livecodes/vue' ;
const config = {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ;
</ script >
< template >
< LiveCodes :config =" config " view =" result " />
</ template >Darüber hinaus ermöglicht das SDK Links zu Spielplätzen:
import { getPlaygroundUrl } from 'livecodes' ;
const url = getPlaygroundUrl ( {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
} ) ;
console . log ( url ) ;Weitere Informationen finden Sie in SDK -Dokumenten.
Umfassende Dokumentationen für Funktionen, Erste Schritte, Konfiguration und SDK finden Sie unter:
https://livecodes.io/docs/
Die Dokumentationen umfassen Demos, Code -Beispiele, Screenshots, Storybook und TypeScript -Typen.
Halten Sie mit den neuesten Änderungen Schritt:
Wir begrüßen Feedback!
Bitte starten Sie ein neues Problem oder eine neue Diskussion.
Für Sicherheitsberichte finden Sie unter Security.md.
Sie können uns auch mit dem Kontaktformular an uns wenden.
Beiträge sind willkommen und sehr geschätzt.
Ein großer Gruß an unsere wunderbaren Mitwirkenden! Ihre harte Arbeit macht den Unterschied!
Weitere Informationen finden Sie im Beitragshandbuch.
LiveCodes verwendet Dienste, die großzügig bereitgestellt werden von:
Pakete, die von LiveCodes und ihren Lizenzen verwendet werden, sind hier aufgeführt.
MIT -Lizenz © Hatem Hosny
LiveCodes ist kostenlos und Open-Source. Die App enthält keine Anzeigen oder erfordert Abonnement. Es ermöglicht eine unbegrenzte Verwendung ohne Beschränkungen.
Durch das Sponsoring von LiveCodes unterstützen Sie die laufende Entwicklung und Wartung des Projekts und tragen dazu bei, sicherzustellen, dass es für die Entwicklergemeinschaft eine wertvolle Ressource bleibt.
Bitte erwägen Sie, Sponsor zu werden.
