livecodes

LiveCodes

Taman bermain kode yang hanya berfungsi!

Taman bermain kode sisi klien yang kaya fitur, open-source, untuk React, Vue, Svelte, Solid, TypeScript, Python, Go, Ruby, PHP dan 90+ bahasa/kerangka kerja.

Cobalah sekarang di livecodes.io

Dokumentasi

Apa yang membuat livecode berbeda?

Taman bermain kode yang hanya berfungsi!

• Tidak ada server untuk dikonfigurasi (atau bayar!)
• Tidak ada basis data untuk dipelihara (atau bayar!)
• Tidak ada pemasangan
• Tidak ada file konfigurasi
• Tidak ada langkah membangun
• Tidak ada biaya berlangganan (gratis dan open-source)
• Tidak ada akun yang diperlukan *
• Tidak ada batasan untuk penggunaan (proyek pribadi tanpa batas)
• 90+ bahasa/kerangka kerja/prosesor
• Set fitur dan integrasi yang besar
• Kode impor dari berbagai sumber
• Gunakan modul dari NPM, Deno.land/x, JSR, GitHub, dan lainnya
• Dengan mudah menanamkannya di halaman web Anda
• Itu berjalan di browser (sisi klien)

_{* Akun GitHub hanya diperlukan untuk fitur yang menggunakan integrasi GitHub.}

Awal yang cepat

Aplikasi mandiri

1. Pergi ke livecodes.io

... dan nikmati semua fitur!

Taman bermain tertanam

Tambahkan kode ini ke halaman Anda:

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

^{Periksa dokumentasi untuk taman bermain tertanam.}

Yang menjadi tuan rumah sendiri

1. Unduh rilis

2. Letakkan di server file statis (gratis!) ^{1, 2, 3, 4, 5}

   ^{Periksa panduan untuk hosting sendiri (termasuk pengaturan bawaan untuk digunakan ke halaman github).}

... dan itu hanya berhasil!

Ringkasan fitur

• Berbagai macam dukungan bahasa (90+ bahasa/kerangka kerja/prosesor)
• Editor yang kuat
• Mobile-friendly
• Sumber Daya/Perpustakaan Eksternal
• Modul Impor dari NPM, Deno.land/x, JSR, GitHub dan lainnya
• Kode pra-mengisi
• Proyek impor/ekspor
• Membagikan
• Sematkan taman bermain di halaman web apa pun
• Mode tampilan
• Menyebarkan
• Templat pemula
• Aktiva
• Tema
• Alat dev (konsol, penampil kode yang dikompilasi, pelari uji)
• Pemformatan kode
• Intellisense
• AI Code Assistant?
• Mode Lite
• Mode baca saja
• Siaran
• Sinkronisasi
• Cadangan/Pemulihan
• Sisi klien!
• Sangat dapat dikonfigurasi
• Lingkungan bebas build yang ramah pengembang
• SDK yang kuat (Tersedia untuk Vanilla Javascript, TypeScript, React, Vue dan Svelte)
• Dokumentasi komprehensif
• Berfokus pada privasi dan keamanan
• Gratis dan open-source

Untuk detail, periksa daftar lengkap fitur.

LiveCodes SDK

Perangkat Lunak Pengembangan Perangkat Lunak (SDK) menyediakan antarmuka yang mudah, namun kuat, untuk menanamkan dan berkomunikasi dengan taman bermain LiveCodes.

SDK disediakan sebagai berat ringan (kurang dari 5kB Gzipped), Paket NPM nol-dependensi, yang juga tersedia dari CDN. Ini dapat digunakan untuk membuat taman bermain dengan berbagai macam konfigurasi dan opsi yang disematkan. Selain itu, metode SDK memungkinkan komunikasi terprogram dan kontrol taman bermain selama runtime.

Instalasi

 npm i livecodes

Penggunaan

Contoh: (Buka di LiveCodes)

 import { createPlayground } from 'livecodes' ;

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

JavaScript SDK adalah kerangka kerja/pustaka agnostik. Namun, komponen pembungkus juga disediakan untuk perpustakaan populer (saat ini bereaksi dan vue). SDK dapat digunakan di SVELTE secara langsung tanpa pembungkus. Dukungan TypeScript memberikan jenis keamanan dan pengalaman pengembang yang hebat.

React SDK Contoh: (Buka di 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 Contoh: (Buka di LiveCodes)

 < script setup >
  import LiveCodes from 'livecodes/vue' ;

  const config = {
    markup : {
      language : 'markdown' ,
      content : '# Hello World!' ,
    } ,
  } ;
</ script >

< template >
  < LiveCodes :config =" config " view =" result " />
</ template >

Selain itu, SDK memungkinkan membuat tautan ke taman bermain:

 import { getPlaygroundUrl } from 'livecodes' ;

const url = getPlaygroundUrl ( {
  config : {
    markup : {
      language : 'markdown' ,
      content : '# Hello World!' ,
    } ,
  } ,
} ) ;

console . log ( url ) ;

Lihat SDK Docs untuk lebih jelasnya.

Dokumentasi

Dokumentasi komprehensif untuk fitur, memulai, konfigurasi dan SDK tersedia di:

https://livecodes.io/docs/

Dokumentasi termasuk demo, sampel kode, tangkapan layar, buku cerita dan tipe naskah.

Pembaruan

Lanjutkan dengan perubahan terbaru:

• Twitter/X: @Livecodes_io
• Blog: blog.liveCodes.io
• Pembangunan pengembangan: dev.livecodes.io

Masukan

Kami menyambut umpan balik!

Harap mulai masalah atau diskusi baru.

Untuk laporan keamanan, silakan merujuk ke Security.md.

Anda juga dapat menghubungi kami menggunakan formulir kontak.

Kontribusi

Kontribusi dipersilakan dan sangat dihargai.

Teriakan besar bagi kontributor kami yang luar biasa! Kerja keras Anda membuat semua perbedaan!

Silakan merujuk ke Panduan Kontribusi.

Kredit

LiveCodes menggunakan layanan yang dengan murah hati disediakan oleh:

Paket pihak ketiga

Paket yang digunakan oleh LiveCodes dan lisensi mereka tercantum di sini.

Lisensi

Lisensi MIT © Hatem Hosny

Sponsor

LiveCodes gratis dan open-source. Aplikasi ini tidak berisi iklan atau memerlukan langganan. Ini memungkinkan penggunaan tanpa batas tanpa batasan.

Dengan mensponsori LiveCodes, Anda akan mendukung pengembangan dan pemeliharaan proyek yang berkelanjutan, serta membantu memastikan bahwa itu tetap merupakan sumber daya yang berharga bagi komunitas pengembang.

Harap pertimbangkan menjadi sponsor.