CodePen 線上前端程式編輯器

一般要編寫程式碼都要下載編輯器或開發環境，CodePen 提供了線上操作的服務，讓我們可以不用下載、安裝軟體，即可編寫程式碼，只需要能夠開啟網頁的瀏覽器就可以，甚至可以將程式碼儲存在雲端，遷入到自己的網頁、部落格中也是小意思。

首先開啟 CodePen 的網站，點選 Sign Up for Free 免費註冊，如果已有帳號則點選 Log In 登入

註冊方式有以下，擇一即可

登入後，點擊頭像選擇 New Pen

就可以開始編輯 HTML、CSS、JS 程式碼，打完後會自動產生對應的結果在下面的視窗

可以點擊右上角的 Save 儲存該 Pen

右下會出現一些選項，Embed 可以用來嵌入到自己的網頁中

點擊做一些嵌入時的設定

下方選擇 iframe，並複製提供的 code 貼到自己的網站即可嵌入

如下就是嵌入網頁中的結果