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，您将支持该项目的持续开发和维护，并有助于确保它仍然是开发人员社区的宝贵资源。

请考虑成为赞助商。