GitHub Gist § 高亮化程式碼的上上之選,支援版本控制


趁著上一篇介紹了「Crayon Syntax Highlighter」後,我想繼續介紹另一個我個人覺得很好的高亮化語法解決方案。在上一篇文章中提到,在WordPress安裝外掛多多少少都還是會影響效能的,若是你很在意這一點,那麼可以試試之前介紹過的一些「語法高亮」線上工具,例如:「Pastie」或「代碼發芽網」,但除此之外,本文的主角「GitHub Gist」有可能是綜合考量各方面因素後,一個非常適合用在網站上呈現高亮化語法的服務,GitHub Gist是什麼?它源自於知名的「GitHub」,我想有在寫程式的人大都應該知道,所以在穩定度上有一定的保障,而且Gist又援了版本控制,對於常在修改程式碼的人來說,是個蠻不錯的選擇。

網址:GitHub GistGitHub註冊

【註冊】

要使用Gist功能其實不用註冊也可以使用,但在經過我的測試後發現,未註冊者雖然在內嵌語法上沒有什麼問題,只要網站支援Javascript就可以正常顯示,但是卻無法出現高亮化的效果,而且非會員無法使用版本控制與討論的功能,因此,如果你是個常常需要分享程式碼的人,建議可以申請一個帳號,便於管理。

要註冊Gist,其實就是成為GitHub的會員,請進入「GitHub的註冊」網址,分別填入:

  1. Username:使用者名稱,以後可以用此名稱來當作登入帳號
  2. Email Address:輸入你的電子郵件,亦可用EMail來當作登入帳號 
  3. Password:輸入密碼
  4. Confirm your password:再次輸入密碼便於驗証

註冊相當的簡單,填入資料後,點擊下方的「Create an account」來建立帳號

免費會員選擇「Free」的方案即可,接著點擊「Finish sign up」即可

基本上這樣就完成註冊了 (但記得到信箱中點選一下驗証郵件),再來GitHub網站就會利用「Hello World」的教學來引導用戶了解GitHub的運作,如果你只是要使用Gist,那麼可以跳過這個教學指引

【使用教學】

操作上也非常的簡單,分述如下:

  1. 程式碼的描述,例如該程式碼的用途
  2. 檔名
  3. 選擇要套用的語系,如果在(2)中的檔名有輸入副檔名的話,那麼這裡的語系會自動篩選出來
  4. Indent Mode指的是要對齊的方式,是要用幾個空白鍵或者Tab來內縮對齊
  5. 如果你的檔案不只一個,那麼可以利用「Add file」的按鈕來繼續加入檔案,但請注意,一個內嵌的語法會把所有的檔案都列出來,文末會有說明如何在一個具有多個檔案的Gist,來個別顯示檔案
  6. 在Gist中,不管是不是註冊會員,都可以將你的代碼公開或設為私密狀態,私密和公開有什麼不同呢?差別在於私密的程式碼不會被搜尋到(Gist有搜尋功能),但只要有網址或內嵌語法的人還是可以使用或觀看

假設我建立了一個Java的Hello Word,此時便可以利用右邊的「Embed」中的語法內嵌到自己的網站中,或者你也可以分享瀏覽器的「網址」給他人

事後都可以再利用上方的功能列來修改程式碼,或者變更私密、公開的狀態

來看看實際的範例好了,以下的程式碼我是設成私密狀態,雖然無法被搜尋到,但知道連結的人一樣可以使用:

在上方有提到,我們在建立一個Gist時可以利用「Add File」來新增不同的檔案,但這時如果你把語法內那到網站,你會發現網頁會把所有的檔案都呈現出來,例如下圖的「first.java」、「second.java」

此時如果想要單一檔案的呈現,只要把JS語法後面附加上「?file=檔名」這樣就行了,例如下面的語法就可以只顯示第一筆的檔案:(這部分的說明也可以參考香腸的介紹)

<script src=”https://gist.github.com/jinnsblog/2f4c7a08fc2bd6a13d41.js?file=first.java“></script>

小結:整體來說,Gist是個相當不錯的高亮化語法工具,尤其是我們可以針對語法進行修改,還可以復原以前的版本,這就是它的強處,另外一個優點是我都把它來當成我一些程式碼的收藏庫,因為寫程式寫久了,總會重複利用一些常用的副程式,把這些副程式收集起來,以後要用的時候就很方便重新取用,而不需重新實作了。