livecodes
v39
단지 작동하는 코드 놀이터!
React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP 및 90+ 언어/프레임 워크 용 기능이 풍부한 오픈 소스, 클라이언트 측 코드 놀이터.
LiveCodes.io에서 지금 시도하십시오
문서
Livecodes가 다른 이유는 무엇입니까?
* GitHub 계정은 GitHub 통합을 사용하는 기능에만 필요합니다.
... 그리고 모든 기능을 즐기십시오!
이 코드를 페이지에 추가하십시오.
< 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 >내장 된 놀이터에 대한 문서를 확인하십시오.
릴리스를 다운로드하십시오
정적 파일 서버에 넣으십시오 (무료로!) 1, 2, 3, 4, 5
자체 호스팅 안내서 (GitHub 페이지에 배포 할 내장 설정 포함)를 확인하십시오.
... 그리고 그것은 단지 작동합니다!
자세한 내용은 전체 기능 목록을 확인하십시오.
SDK (Software Development Kit)는 Livecodes Playground와 함께 쉽지만 강력한 인터페이스를 제공합니다.
SDK는 CDN에서도 사용할 수있는 경량 (5KB 미만), 제로 의존성 NPM 패키지로 제공됩니다. 다양한 구성과 임베드 옵션을 갖춘 놀이터를 만드는 데 사용할 수 있습니다. 또한 SDK 방법을 사용하면 런타임 동안 놀이터의 프로그래밍 방식의 통신 및 제어가 가능합니다.
npm i livecodes
예 : (livecodes에서 열림)
import { createPlayground } from 'livecodes' ;
createPlayground ( '#container' , {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
view : 'result' ,
} ) ;JavaScript SDK는 프레임 워크/라이브러리가 불가지론입니다. 그러나 인기있는 라이브러리 (현재 React and VUE)에는 래퍼 구성 요소가 제공됩니다. SDK는 래퍼없이 직접 svelte에서 사용할 수 있습니다. TypeScript 지원은 유형 안전성과 훌륭한 개발자 경험을 제공합니다.
반응 SDK 예제 : (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 예 : (livecodes에서 오픈)
< script setup >
import LiveCodes from 'livecodes/vue' ;
const config = {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ;
</ script >
< template >
< LiveCodes :config =" config " view =" result " />
</ template >또한 SDK는 놀이터에 대한 링크를 만들 수 있습니다.
import { getPlaygroundUrl } from 'livecodes' ;
const url = getPlaygroundUrl ( {
config : {
markup : {
language : 'markdown' ,
content : '# Hello World!' ,
} ,
} ,
} ) ;
console . log ( url ) ;자세한 내용은 SDK 문서를 참조하십시오.
기능, 시작, 구성 및 SDK에 대한 포괄적 인 설명서는 다음과 같습니다.
https://livecodes.io/docs/
문서에는 데모, 코드 샘플, 스크린 샷, 스토리 북 및 타입 스크립트 유형이 포함됩니다.
최신 변경 사항을 확인하십시오.
우리는 피드백을 환영합니다!
새로운 문제 나 토론을 시작하십시오.
보안 보고서는 Security.md를 참조하십시오.
연락처 양식을 사용하여 저희에게 연락 할 수도 있습니다.
기부금은 환영 받고 높이 평가됩니다.
우리의 훌륭한 기고자들에게 큰 소리를 지르세요! 당신의 노력은 모든 차이를 만듭니다!
기여 가이드를 참조하십시오.
LiveCodes는 관대하게 제공되는 서비스를 사용합니다.
LiveCodes와 라이센스가 사용하는 패키지는 여기에 나열되어 있습니다.
MIT 라이센스 © Hatem Hosny
Livecodes는 무료이며 오픈 소스입니다. 앱에는 광고가 포함되어 있지 않거나 구독이 필요하지 않습니다. 제한없이 무제한 사용을 허용합니다.
LiveCodes를 후원함으로써 프로젝트의 지속적인 개발 및 유지 보수를 지원하고 개발자 커뮤니티에 귀중한 자원으로 남아 있는지 확인할 것입니다.
후원자가되는 것을 고려하십시오.
