如何主持 REPL

如何主持 REPL

有许多带有 REPL 的很棒的代码游乐场，例如 代码笔 , JS小提琴 , JS斌 ， 和 CSS 甲板 仅举几例。它们都支持嵌入您自己的网站，以便您可以将它们用于文档。但是，这也意味着您可以解决他们的品牌和 UI 细微差别。而且，您必须去多个地方以确保您的文档与您的示例同步。麻省理工学院许可 @anywhichway/repl-host 允许您以您想要的方式托管和样式化 REPL，同时使它们成为文档的固有部分。

加载组件后：

 <script src="https://cdn.jsdelivr.net/npm/@anywhichway/[[email protected]](/cdn-cgi/l/email-protection)" component="https://cdn.jsdelivr.net/npm/@anywhichway/[[email protected]](/cdn-cgi/l/email-protection)"></script>

可以使用非常短的标签创建最简单的 REPL：

 <repl-host head css body javascript></repl-host>

这为您提供了四个可调整大小的编辑器，具有语法突出显示、一个可调整大小的显示区域和一个用于显示消息和错误的控制台。

想要删除一个部分？只需省略属性：

 <repl-host css body javascript></repl-host>

想要提供预先填充的内容？只需使用命名插槽：

 <repl-host head css body javascript>  
 <slot name="css">h1 {字体大小：小}</slot>  
 </repl-host>

不想让用户编辑某些内容，请将 slot 设置为“readonly”。

 <repl-host head css body javascript>  
 <slot name="css" readonly>h1 {字体大小：小}</slot>  
 </repl-host>

想要一些不同的造型？只需为主要标签或插槽提供样式属性。

 <repl-host head css body javascript  
 style="width:50%;float:left;border:solid black 1px;">  
 <slot name="javascript" style="min-height:10em"></slot>  
 </repl-host>  
 <p>玩得开心这个 REPL</p>

你甚至可以提供一个样式槽来让你完全控制布局。

 <repl-host head css body javascript style="width:250px;float:left;border:solid black 1px;">  
 <slot name="javascript" style="min-height:10em"></slot>  
 <slot name="replstyle">  
 代码 {  
 背景：浅蓝色！重要；  
 }  
 </slot>  
 </repl-host>  
 <p>玩得开心这个 REPL</p>

为简单起见，@anywhichway/repl-host 不提供保存 REPL 的功能。但是，即使没有服务器，您也可以通过利用 本地存储 或者 索引数据库 在浏览器中。

为了安全起见，@anywhichway/repl-host 在 iframe 中运行代码。您甚至可以传递标准的 iframe 属性，例如 允许 和 沙盒 至 <repl-host>.

从...中得到快乐！如果有足够的兴趣，我们将发布一些其他的音乐、数学和化学成分。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/30244/02161208