@radishzz 自己喜欢瞎搞，哈哈哈，之前样式保留分支了，以后更新一下功能

又看了一眼，单纯 html 可以用 innerHTML ，安全点用 iframe 做。

如果有 css 样式隔离，可以用 iframe 喝 ShadowRoot 。React 的 ShadowRoot 可以用这段代码 https://github.com/Plumbiu/blog/blob/main/src/components/function/Shadow.tsx

写过一篇博客： https://blog.plumbiu.top/posts/blog/implement-playground

简单点，下面这行代码就能用

```ts
import React, { createElement } from 'react'
import { transform, Options } from 'sucrase'

type Scope = Record<string, any>

const transfromOptions: Options = {
transforms: ['jsx', 'flow', 'imports'],
}

function evalCode(code: string, scope: Scope) {
const _require = (k: keyof Scope) => {
return scope[k]
}
const scopeKeys = Object.keys(scope)
const scopeValues = scopeKeys.map((key) => scope[key])
const _exports: Record<string, any> = {}
const fn = new Function('exports', 'require', ...scopeKeys, code)
fn(_exports, _require, ...scopeValues)
return _exports.default
}

interface PlaygroundPreviewProps {
code: string
scope?: Scope
}

export function Preview({ code, scope }: PlaygroundPreviewProps) {
const evalScope: Scope = {
react: React,
React: React,
...(scope ?? {}),
}
const mainCode = transform(code, transfromOptions).code
return createElement(evalCode(mainCode, evalScope))
}
```

@xiaoxiaov vercel 直接部署就行，gitpage README 最下面有说明

@gniviliving 学生党没钱😭

@sickoo
@imjiaoyuan
@wogogoing 想加，但是不知道描述怎么写😂，可以麻烦看一下 append 嘛

@96 文章多了看左侧，大屏确实不好看，之后再优化一下

@katwalk 左侧栏没有分页，内容多的话左侧栏找比较快

@pike0002 嗯，大部分都是自己写的

@cooooing “这人很勤奋，啥都没留”，从初中用到现在的 QQ 签名

@cooooing 好啊，回去就加

@misteryliu699 基于 Next.js 的

又一个面向 iframe 开发的

@pepsiwant 我当时看星际穿越，最后那个场景差点哭了，唯一一个令我感动的科幻片

我也是，从初中就开始看，好几次周末都是整天看电影....

astro 就是快啊

看看我的： https://blog.plumbiu.top/

访问速度有点慢，大佬可以优化一下

[generateStaticParams]( https://nextjs.org/docs/app/api-reference/functions/generate-static-params) 不就可以？