ดาวน์โหลด livecodes - livecodes Source Source Download

livecodes

ทรัพยากรอื่นๆ

v39

ดาวน์โหลด

livecodes

สนามเด็กเล่นโค้ดที่ใช้งานได้!

สนามเด็กเล่นรหัส ฝั่งไคลเอ็นต์ สำหรับ React, Vue, Svelte, Solid, typenscript, Python, GO, Ruby, PHP และ 90+ ภาษา/เฟรมเวิร์ก

ลองเลยที่ LiveCodes.io

เอกสาร

อะไรทำให้ LiveCodes แตกต่างกัน?

สนามเด็กเล่นโค้ดที่ใช้งานได้!

ไม่มีเซิร์ฟเวอร์ที่จะกำหนดค่า (หรือจ่าย!)
ไม่มีฐานข้อมูลที่จะรักษา (หรือจ่าย!)
ไม่มีการติดตั้ง
ไม่มีไฟล์กำหนดค่า
ไม่มีขั้นตอนการสร้าง
ไม่มีค่าธรรมเนียมการสมัครสมาชิก (ฟรีและโอเพ่นซอร์ส)
ไม่จำเป็นต้องมีบัญชี *
ไม่มีข้อ จำกัด สำหรับการใช้งาน (โครงการส่วนตัวไม่ จำกัด )
90+ ภาษา/เฟรมเวิร์ก/โปรเซสเซอร์
ชุดคุณสมบัติและการบูรณาการขนาดใหญ่
นำเข้ารหัสจากแหล่งข้อมูลที่หลากหลาย
ใช้โมดูลจาก NPM, deno.land/x, JSR, GitHub และอื่น ๆ
ฝังไว้ในหน้าเว็บของคุณได้อย่างง่ายดาย
มันทำงานในเบราว์เซอร์ (ฝั่งไคลเอ็นต์)

_{* ต้องใช้บัญชี GitHub สำหรับคุณสมบัติที่ใช้การรวม GitHub เท่านั้น}

เริ่มต้นอย่างรวดเร็ว

แอพแบบสแตนด์อโลน

ไปที่ LiveCodes.io

... และเพลิดเพลินไปกับคุณสมบัติทั้งหมด!

สนามเด็กเล่น

เพิ่มรหัสนี้ในหน้าของคุณ:

 < 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)}

... และมันก็ใช้ได้!

สรุปคุณสมบัติ

การสนับสนุนภาษาที่หลากหลาย (90+ ภาษา/เฟรมเวิร์ก/โปรเซสเซอร์)
บรรณาธิการที่ทรงพลัง
เป็นมิตรกับมือถือ
ทรัพยากรภายนอก/ห้องสมุด
นำเข้าโมดูลจาก NPM, deno.land/x, JSR, GitHub และอื่น ๆ
รหัสล่วงหน้า
โครงการนำเข้า/ส่งออก
แบ่งปัน
ฝังสนามเด็กเล่นในหน้าเว็บใด ๆ
แสดงโหมด
ปรับใช้
เทมเพลตเริ่มต้น
สินทรัพย์
ธีม
เครื่องมือ Dev (คอนโซล, ตัวดูโค้ดที่รวบรวม, ทดสอบนักวิ่ง)
การจัดรูปแบบรหัส
ปัญญาชน
ผู้ช่วยรหัส AI?
โหมด lite
โหมดอ่านอย่างเดียว
ออกอากาศ
การซิงค์
สำรอง/กู้คืน
ฝั่งไคลเอ็นต์!
กำหนดค่าได้มาก
สภาพแวดล้อมการสร้างที่เป็นมิตรกับนักพัฒนา
SDK ที่ทรงพลัง (พร้อมใช้งานสำหรับวานิลลาจาวาสคริปต์, typescript, React, Vue และ Svelte)
เอกสารที่ครอบคลุม
มุ่งเน้นไปที่ความเป็นส่วนตัวและความปลอดภัย
ฟรีและโอเพ่นซอร์ส

สำหรับรายละเอียดตรวจสอบรายการคุณสมบัติทั้งหมด

LiveCodes SDK

ชุดพัฒนาซอฟต์แวร์ (SDK) ให้อินเทอร์เฟซที่ง่าย แต่ทรงพลังในการฝังและสื่อสารกับสนามเด็กเล่น LiveCodes

SDK นั้นมีน้ำหนักเบา (น้อยกว่า 5KB GZIpped), แพ็คเกจ NPM ที่พึ่งพาศูนย์ซึ่งมีให้บริการจาก CDN มันสามารถใช้ในการสร้างสนามเด็กเล่นด้วยการกำหนดค่าที่หลากหลายและตัวเลือกที่ฝังอยู่ นอกจากนี้วิธี SDK ยังอนุญาตให้สื่อสารแบบเป็นโปรแกรมและควบคุมสนามเด็กเล่นในระหว่างการรันไทม์

การติดตั้ง

 npm i livecodes

การใช้งาน

ตัวอย่าง: (เปิดใน LiveCodes)

 import { createPlayground } from 'livecodes' ;

createPlayground ( '#container' , {
  config : {
    markup : {
      language : 'markdown' ,
      content : '# Hello World!' ,
    } ,
  } ,
  view : 'result' ,
} ) ;

JavaScript SDK เป็น Framework/Library Agnostic อย่างไรก็ตามส่วนประกอบ wrapper ยังมีไว้สำหรับห้องสมุดยอดนิยม (ปัจจุบันตอบสนองและ Vue) SDK สามารถใช้ใน Svelte ได้โดยตรงโดยไม่มี wrappers การสนับสนุน TypeScript ให้ความปลอดภัยประเภทและประสบการณ์นักพัฒนาที่ยอดเยี่ยม

React 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 ) ;