livecodes

livecodes

一個剛起作用的代碼操場！

功能豐富的，開源的，客戶端的代碼遊樂場，用於React，Vue，Svelte，Sub，Solid，Typescript，Python，Go，Ruby，PHP和90多種語言/框架。

立即在livecodes.io上嘗試

文件

是什麼使LiveCodes不同？

一個剛起作用的代碼操場！

• 無需配置服務器（或付費！）
• 沒有數據庫維護（或付費！）
• 沒有安裝
• 沒有配置文件
• 沒有構建步驟
• 沒有訂閱費（免費和開源）
• 無需帳戶 *
• 沒有使用限制（無限私人項目）
• 90多種語言/框架/處理器
• 大量功能和集成
• 從各種來源導入代碼
• 使用NPM，Deno.land/X，JSR，Github等的模塊
• 輕鬆將其嵌入您的網頁
• 它在瀏覽器（客戶端）中運行

_{* GitHub帳戶僅對於使用GitHub集成的功能才需要。}

快速開始

獨立應用

1. 轉到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. 將其放在靜態文件服務器上（免費！） ^{1、2、3、4、5}

   ^{檢查指南的自我託管（包括用於部署到GitHub頁面的內置設置）。}

...而且它只是有效的！

功能摘要

• 多種語言支持（90多種語言/框架/處理器）
• 強大的編輯
• 移動友好
• 外部資源/庫
• 來自NPM的導入模塊，Deno.land/x，JSR，Github等
• 代碼預填充
• 進出口項目
• 分享
• 將操場嵌入任何網頁中
• 顯示模式
• 部署
• 起動模板
• 資產
• 主題
• 開發工具（控制台，編譯的代碼查看器，測試跑者）
• 代碼格式
• Intellisense
• AI代碼助理？
• Lite模式
• 僅讀取模式
• 播送
• 同步
• 備份/還原
• 客戶端！
• 非常可配置
• 對開發人員友好的無構建環境
• 強大的SDK（可用於香草JavaScript，打字稿，React，Vue和Svelte）
• 綜合文檔
• 專注於隱私和安全
• 免費和開源

有關詳細信息，請查看功能的完整列表。

Livecodes SDK

軟件開發套件（SDK）提供了一個簡單但功能強大的界面，可以與LiveCodes Playgrounds進行嵌入和通信。

SDK作為輕重量（小於5KB GZB的），零依賴性NPM軟件包，也可以從CDN中獲得。它可用於創建具有多種配置和嵌入式選項的遊樂場。此外，SDK方法允許在運行時進行程序化通信和控制遊樂場的控制。

安裝

 npm i livecodes

用法

示例：（在livecodes中打開）

 import { createPlayground } from 'livecodes' ;

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

JavaScript SDK是框架/庫不可知。但是，還為流行的庫（當前React和Vue）提供包裝組件。 SDK可以直接在沒有包裝器的情況下直接在Svelte中使用。打字稿支持提供類型安全和出色的開發人員體驗。

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

有關更多詳細信息，請參見SDK文檔。

文件

可以在：

https://livecodes.io/docs/

文檔包括演示，代碼樣本，屏幕截圖，故事書和打字稿類型。

更新

跟上最新更改：

• Twitter/X：@livecodes_io
• 博客：blog.livecodes.io
• 開發構建：dev.livecodes.io

回饋

我們歡迎反饋！

請開始新的問題或討論。

有關安全性報告，請參考Security.md。

您也可以使用聯繫表與我們聯繫。

貢獻

歡迎捐款和高度讚賞。

對我們出色的貢獻者大喊大叫！您的辛勤工作會帶來一切不同！

請參閱貢獻指南。

學分

LiveCodes使用以下提供的服務：

第三方套餐

LiveCodes及其許可證使用的軟件包在此處列出。

執照

麻省理工學院許可©Hatem Hosny

贊助

LiveCodes是免費的和開源的。該應用不包含廣告或需要訂閱。它允許無限制使用而無需任何限制。

通過贊助LiveCodes，您將支持該項目的持續開發和維護，並有助於確保它仍然是開發人員社區的寶貴資源。

請考慮成為贊助商。