sakaay-飒龘 当以读书通世事

主题

00:00:00
2025-07-162025-12-12创客编程系列Python在线编辑器
1045
3.8m

Python在线编辑器示例 ​

本页面展示了一个基于浏览器的Python在线编辑器组件，它允许您直接在浏览器中编写和执行Python代码，无需在本地安装Python环境。

最新版本支持通过题目ID加载预定义的编程题目代码。

编辑器介绍 ​

这个Python编辑器组件具有以下特点：

  • 在浏览器中直接运行Python代码（使用Pyodide技术）
  • 简洁易用的界面设计
  • 实时显示代码执行结果
  • 错误处理和状态提示
  • 响应式设计，适配不同设备

开始使用 ​

下面是Python在线编辑器的演示。首次加载时，需要一些时间来准备Python环境。

默认模式（空白编辑器） ​

题目ID模式（加载特定题目代码） ​

通过指定problemId属性，可以加载预定义的编程题目代码：

通过ID加载代码功能 ​

编辑器组件现在支持通过problemId属性加载特定的编程题目代码。这使得在文档中集成各种编程示例变得更加简单和灵活。

支持的题目ID列表 ​

题目ID标题描述
hello-worldHello World示例最简单的Python程序示例
basic-calculation基础数学计算演示基本的数学运算和格式化输出
conditional-statements条件判断练习演示if-elif-else条件语句的使用
loop-examples循环结构练习演示for和while循环的使用以及列表操作
function-example函数定义与调用演示如何定义函数、传递参数和返回值
list-operations列表操作练习演示Python列表的常见操作和方法

使用方法 ​

在Markdown文件中，您可以这样使用ID模式：

markdown
<ClientOnly>
  <PythonEditor problemId="题目ID"/>
</ClientOnly>

其中题目ID是上述表格中列出的ID之一。

使用说明 ​

默认模式 ​

  1. 编写代码：在代码编辑区域输入您的Python代码
  2. 运行代码：点击「运行代码」按钮执行您的代码
  3. 查看结果：执行结果将显示在下方的输出区域
  4. 重置代码：如需重新开始，可以点击「重置代码」按钮恢复默认示例
  5. 输入参数：在输入区域提供代码运行所需的参数（对应input()函数）
  6. 文件操作：支持打开和保存Python代码文件

题目ID模式 ​

  1. 加载代码：组件将自动加载指定ID的题目代码
  2. 预设输入：如果题目有默认输入参数，会自动设置到输入区域
  3. 运行和修改：您可以直接运行代码或根据需要修改代码

注意事项 ​

  • 首次加载时，需要从CDN下载Pyodide环境，这可能需要一些时间
  • 由于浏览器安全限制，某些Python库和功能可能无法使用
  • 复杂的计算或长时间运行的代码可能会导致浏览器性能问题
  • 当前版本支持基本的Python语法和标准库功能

支持的功能 ​

这个在线编辑器可以用于以下场景：

  • 学习Python基础语法
  • 练习简单的算法题
  • 进行数据分析和可视化（部分功能）
  • 编写和测试小型Python脚本

示例代码 ​

编辑器默认包含一个斐波那契数列的示例代码，您可以尝试修改或替换为您自己的代码。

python
# 欢迎使用Python在线编辑器
# 在这里编写和执行Python代码

# 例如：计算斐波那契数列
def fibonacci(n):
    if n <= 1:
        return n
    else:
        return fibonacci(n-1) + fibonacci(n-2)

# 打印前10个斐波那契数
for i in range(10):
    print(f"fibonacci({i}) = {fibonacci(i)}")

# 也可以进行简单的计算
result = 1 + 1
print(f"1 + 1 = {result}")

更多学习资源 ​

如果您对Python编程感兴趣，这里有一些推荐的学习资源：

祝您编程愉快！

最近更新