绝佳的功能使学习
教授编写代码简单而有趣

Thimble 是一个可以在浏览器中运行的全功能代码编辑器。它旨在帮助新手编程人员使用 HTML、CSS 和 JavaScript 创建自己的网站和基于 Web 的项目。您需要的一切都在您的指尖,让您(或您的课堂)快速部署和运行。

它将代码编辑器、网页服务器、网页浏览器和开发者工具合而为一,而且它还是免费的!

即时查看您的更改

创建与实验,用实时预览更快完成任务。它将即时展示您对代码的更改。

重组任何 Thimble 项目

喜欢看到的某个 Thimble 项目?你可以重组它来将其改版,制成自己的版本。您还可以将制成的项目发送给朋友或学生们,看看他们有何灵感。

方便的代码片段

将 HTML、CSS 或 JavaScript 代码片段加入你的代码,更快完成任务。

内置 JavaScript 控制台

编写、处理一些 JavaScript?Thimble 的内置控制台使测试和调试更加轻松。

添加和管理文件

Thimble 像一个真实的 Web 项目,你可以创建、重命名、删除乃至上传自己的文件。

  • 将您的项目下载为一个 .zip 文件,然后就可以本地查看它了
  • 将您的计算机文件拖放到 Thimble

开关与关灯

Thimble 配有黑暗与明亮主题,随意选择最适合你的主题。您还可以更改文字大小等选项。

参与并创建嵌入的教程

项目可以帮助您(或您的学生)学习怎样改变项目。

输入时得到代码提示

不会卡住,更好记住众多规则和语法。Thimble 会为您在 HTML、CSS 以及 JavaScript 文件中提供提示。

在您的 HTML 页面中编辑 CSS

为您的元素编写 CSS 样式时,不需要离开您正在编辑的 HTML 页面。将文本光标放在任何元素标签上,然后按 Cmd/Ctrl + E 开始编写 CSS 样式。

快速将项目发布到网络

只需点击一下,即可将项目在网络上发布。您之后对该项目的更改也可以轻松更新。

在编辑器中选择颜色

将输入光标放在 CSS 文件中的任何颜色值上,然后按 Cmd/Ctrl + E 打开颜色选择器。

在移动设备上测试您的项目

切换到 移动预览模式 以不宽的视野查看您的作品。打开全屏预览则是宽景视角。

快速查找 HTML 项目

开启 DOM 查看器 并悬停在各元素上进行预览。Thimble 将在 HTML 编辑器中突出相关代码。

图像滤镜

给您的图像添加滤镜,为你的项目增添乐趣!

来张自拍

使用 Thimble 的自拍工具将你的靓照添加到你正在编辑的页面 — 它会调用您的计算机的摄像头。只需将 <img src= 标签输入到你的 HTML 页面,你会看到一个提示。