
身為開發者一定對於 GitHub 不陌生,有許多開放原始碼(Open Source)專案都能在這裡找到,其他像是 StackOverflow 則是尋找解決方案絕佳去處,在搜尋問題時很多時候都可以在這網站找到網友提供的解法,如果要用於網站呈現原始碼,我個人習慣選擇 GitHub Gist,我在「5個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」曾經推薦,要分享程式碼或嵌入文章都非常值得一試。
不過你可能很納悶,這些服務為什麼都無法讓使用者快速複製程式碼?每次都必須手動選取複製,有時候甚至必須先貼到純文字編輯器轉為文字格式,對此網路上有個開源專案叫做「clipboard.js」是被設計出來解決問題,簡單來說,它可以在網頁呈現指令或程式碼的段落加上一個複製按鈕,讓使用者快速複製內容,而且整個程式不到 3kb
。

本文要推薦的「CodeCopy」是一款基於 clipboard.js
的免費瀏覽器外掛功能,可以讓你的 Google Chrome、Firefox 在幾個支援的程式碼網站自動載入快速複製程式碼功能,支援的網站包括:GitHub、MDN、Gist、StackOverflow、StackExchange、npm 和 Medium 等等,完全不用進行任何設定。
如果你時常會需要用到網站上的程式碼,CodeCopy 能讓整個工作流程變得更順暢,當然也不影響到使用習慣,只有滑鼠游標移動到程式碼時才會於右上角顯示複製按鈕。
擴充功能資訊
元件名稱:CodeCopy
適用平台:Chrome、Firefox
程式語系:英文
官方網站:https://github.com/zenorocha/codecopy
安裝頁面:Chrome | Firefox
使用教學
STEP 1
以下使用 Google Chrome 作為操作範例,和 Firefox 應無太大差異。
開啟 CodeCopy 的 Chrome 線上應用程式商店,點選右上角「加到 Chrome」將外掛下載安裝到瀏覽器,安裝後右上角一樣會多一個新的圖示功能,不過點選不會有效果。

STEP 2
當你打開 CodeCopy 支援的網站後,將滑鼠游標移動到程式碼範圍,右上角就會出現一個複製到剪貼簿(Copy to clipboard)的按鈕,點選就能快速複製這一大段程式碼。

不過也不是每個段落都會出現 CodeCopy 功能,依照 clipboard.js 的設計,只有在遇到特定的程式碼才會發生作用,因此只會在指令或原始碼部分出現 CodeCopy 按鈕,而當前只會對幾個網站顯示。
