CodePen線上編輯器－前端程式碼(HTML、CSS、JS)，可嵌入到網站演示。

CodePen線上編輯器
使用CodePen線上程式碼編輯器，只要開啟瀏覽器，就能撰寫HTML、CSS和JavaScript並即時預覽結果，支援將整個程式碼編輯視窗，嵌入到自己的網站中作範例演示的功能。同時CodePen網站還是個前端開發技術交流的開源平台，可查看其他用戶所撰寫的程式碼和成果演示。




點此前往：CodePen線上程式碼編輯器



CodePen線上程式碼編輯器
STEP1

免費註冊帳號，開始使用線上程式碼編輯器，或者檢視其他作者寫的程式碼範例，互相技術交流激發設計靈感的開源平台。
CodePen線上編輯器1

STEP2

主要為HTML、CSS、JavaScript前端語言。可依需求最大化編輯器某一個窗口、進階編譯偵錯。
CodePen線上編輯器2

STEP3

在畫面下方會看到「embed嵌入」與「Export匯出」的選項。
CodePen線上編輯器3

STEP4

複製程式碼，在貼到自己的部落格中。
CodePen線上編輯器4

看看範例

See the Pen
Parasites by Anurag (@anuraghazra)
on CodePen.



延伸閱讀：JSFiddle線上編輯器、Stekpad免費線上共同編輯器

相關文章:

  1. DirtyMarkup自動編排整理凌亂的程式碼，Tidy up HTML,CSS,JavaScript code
  2. 免費CSS文字動畫網站，酷炫的文字特效，直接複製HTML+CSS+JS使用。
  3. Html.cafe 線上寫程式碼的網頁編輯器，HTML+CSS，即時看結果
  4. 【免費範本】CodeMyUI網頁動態介面設計範例，酷炫的按鈕、動畫圖片展示、彈窗、選單等特效，程式碼可複製使用。
  5. 線上HTML、CSS 、JavaScript 程式碼編輯器，測試Run出結果
  6. useAnimations動態圖標下載，可商用於網頁設計＆開發App的動畫按鈕。
  7. 【推薦】Calmly Writer Online線上文字編輯器，支援加入圖片、格式設定、下載並儲存成txt.html.doc檔。
  8. 不會程式碼也會用『HTML DIV 線上表格產生器』快速拖曳欄位