有超棒的功能,讓教
學寫程式都變得簡單又有趣!

Thimble 是一套在瀏覽器中執行的全功能程式編輯器。這套編輯器是要設計來幫助新入門的網頁設計師使用 HTML、CSS 及 JavaScript 來打造自己的網站或網頁專案。所有您需要的東西都在這邊,讓您(或您的同學)可以快速上手。

這是一套讓程式碼編輯器、網頁伺服器、網頁瀏覽器及開發者工具多合一的工具組—而且不用錢!

即時看到您的修改

建立及時預覽,並可快速實驗您的修改。您修改的程式碼會即時生效。

混搭任何 Thimble 專案

喜歡 Thimble 上的某個專案嗎?您可將其混搭成您自有風格的版本,也可以將專案傳送給朋友或同學—看看他們可以做出什麼東西?

方便的程式碼段落

將方便選擇使用的 HTML、CSS 與 JavaScript 程式碼小段落直接加到您的作品當中,讓作品能更快完成。

內建 JavaScript 主控台

在寫 JavaScript 嗎?Thimble 內建的主控台可讓您更方便測試與除錯。

新增與管理檔案

Thimble 就像一套真的網頁專案,您可以建立、更名、刪除,甚至上載自己的檔案。

  • 下載您的專案的 .zip 打包檔案,直接在電腦中檢視
  • 從您的電腦拖曳檔案到 Thimble

開燈,或是關燈

Thimble 內建暗色與亮色佈景主題供您任選使用,也可以修改字體大小等其他選項。

關注並建立教學內容

各專案可以有自己的教學內容,讓您(或您的學生)在修改專案內容的同時也可學到東西。

打字的時候就可以得到程式碼提示

別因為背不起來語法跟一堆程式名稱就卡住。Thimble 可提供您 HTML、CSS 甚至是 JavaScript 檔案內容的提示。

直接在 HTML 頁面中編輯 CSS

不需離開您目前正在編寫的 HTML 網頁,即可為元素撰寫 CSS 樣式。將遊標放到任何元素標籤上,按下 Cmd/Ctrl + E 即可撰寫 CSS 樣式。

將專案快速公開到 Web 上

只要簡單一點,就可以把專案發布到網路世界中。然後,您每次修改也都可以輕鬆更新發布的專案。

直接在編輯器挑選色彩

將遊標放到 CSS 檔案中的任何色彩值上,然後按下 Cmd/Ctrl + E 即可開啟色彩選取器。

在行動裝置測試您的專案

切換至行動預覽模式就可看到您的作品在手機等窄螢幕裝置上長得如何。然後可開啟全螢幕預覽,綜觀全局。

快速找到 HTML 元素

開啟 DOM 檢測器然後將滑鼠停留在預覽畫面中的不同元素,Thimble 將在 HTML 編輯器中強調相關的程式碼。

圖片濾鏡

在專案裡面加點好玩的東西,像是為圖片加上濾鏡。貓貓們從來沒有這麼可愛過!

拍張自拍

您可以使用 Thimble 的自拍工具,透過電腦的視訊攝影機拍攝自拍照,並加到任何頁面中。只要在 HTML 頁面中輸入<img src= 標籤,就會看到提示。