LiveCodes 项目常见问题解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00529/article/details/144416597

LiveCodes 项目常见问题解决方案

livecodes Code Playground That Just Works! 项目地址: https://gitcode.com/gh_mirrors/li/livecodes

1. 项目基础介绍与主要编程语言

LiveCodes 是一个功能丰富的开源客户端代码沙盒，支持超过90种语言和框架，包括 React、Vue、Svelte、Solid、TypeScript、Python、Go、Ruby、PHP 等。它允许开发者在浏览器中直接编写和运行代码，无需配置服务器或数据库，也无需安装任何软件或配置文件。LiveCodes 的目标是提供一个即开即用的代码 playground，适用于各种开发需求。

该项目主要使用 JavaScript 编写，依赖于 Node.js 环境和一系列前端技术栈。

2. 新手使用常见问题与解决步骤

问题一：如何快速在本地运行 LiveCodes？

解决步骤：

确保已安装 Node.js 和 npm（Node.js 包管理器）。
克隆项目到本地：git clone https://github.com/live-codes/livecodes.git。
进入项目文件夹：cd livecodes。
安装项目依赖：npm install。
运行开发服务器：npm start。此时，LiveCodes 应该会在浏览器中打开，并且可以开始使用了。

问题二：如何将 LiveCodes 嵌入到自己的网页？

解决步骤：

在你的 HTML 页面中添加一个容器元素，例如：<div id="container"></div>。

在 <head> 标签或页面底部添加以下脚本标签来引入 LiveCodes：

<script type="module">
  import createPlayground from 'https://cdn.jsdelivr.net/npm/livecodes';
  createPlayground('#container', {
    markdown: '# Hello LiveCodes',
    css: 'h1 {color: dodgerblue;}',
    js: 'console.log("Hello from JS");',
    console: 'open'
  });
</script>