交互式代码示例

文献、教育和娱乐 🎉

将交互式代码片段直接嵌入您的产品文档,在线课程或博客文章中.

┌───────────────────────────────┐
│ def greet(name):              │
│   print(f"Hello, {name}!")    │
│                               │
│ greet("World")                │
└───────────────────────────────┘
  Run ►  Edit  ✓ Done
┌───────────────────────────────┐
│ Hello, World!                 │
└───────────────────────────────┘

要点 :

• 将静态代码实例自动转换为迷你游戏场.
• 轻而易入.
• 用于任何编程语言,数据库,或软件的沙盒.
• 开源. 使用Apache -2.0许可.

有关科达皮的介绍,请参见此帖: 游戏和盈利的互动代码示例。 。 。 .

安装

安装方式 npm数字 :

npm install @antonz/codapi

或使用CDN:

<script src="https://unpkg.com/@antonz/[email protected]/dist/snippet.js"></script>

可选样式 :

<link rel="stylesheet" href="https://unpkg.com/@antonz/[email protected]/dist/snippet.css" />

使用量

见最适合您使用的指南 :

• HTML/ 马可达
• 多龙
• 文档
• 狮身人面像
• 文字压力
• 标题
• Dev.to/Medium/Substack/新闻通讯 (或不支持JavaScript嵌入的其他平台)

您还需要一个工作 Codapi 服务器, 无论是基于云的 科达皮.org 或者说 自动托管。除非您正在使用浏览器游乐场(见下文).

高级特性

Codapi提供了一些超越简单代码操场的功能:

• 输出模式 用于显示图像、HTML碎片和交互式DOM.
• 模板 隐藏部分代码在幕后.
• 多文件 游戏场.
• 自定义动作。 。 。 .
• 代码单元格 一个像Jupyter笔记本的体验.

浏览者游乐场

大多数游乐场(如Go或PostgreSQL)在Codapi服务器上运行代码.

还有两个游乐场完全在浏览器中工作,不需要可达皮服务器—— Java 脚本 财务报告和审定财务报表 获取。 。 。 .

样式

部件默认为未设置 。 使用 snippet.css 用来做一些基本的造型 或者添加自己的.

以下是部件结构:

<codapi-snippet sandbox="python" editor="basic">
    <codapi-toolbar>
        <button>Run</button>
        <a href="#edit">Edit</a>
        <codapi-status> ✓ Done </codapi-status>
    </codapi-toolbar>
    <codapi-output>
        <pre><code>Hello, World!</code></pre>
    </codapi-output>
</codapi-snippet>

codapi-snippet 是顶级元素。 它包含工具栏(codapi-toolbar)和代码执行输出(codapi-output) (中文(简体) ). 工具栏包含运行 button,一个或多个动作按钮(a)和状态栏(codapi-status) (中文(简体) ).

支助

科达皮主要是一个 一个人 项目,不由《维也纳公约》基金或任何东西支持.

如果您发现Codapi有用, 请在 GitHub 上显示, 并在您的同伴中传播这个词 。 这确实有助于推进项目.

页:1 订阅 以保留在新的特性之上.